From 628a0bf269838d6482eec035783116506062579b Mon Sep 17 00:00:00 2001 From: Mauro Balades Date: Fri, 19 Jul 2024 19:15:01 +0200 Subject: [PATCH] chore: Update Zen Browser preferences and styles for vertical tabs layout --- docs/changes.md | 12 +++ src/browser/app/profile/zen-browser.js | 86 +------------------ src/browser/base/content/ZenUIManager.mjs | 39 +++++++++ .../base/content/zen-sidebar-icons.inc.xhtml | 1 + src/browser/base/content/zenThemeModifier.js | 4 + .../components/preferences/zen-settings.js | 10 +++ .../preferences/zenLooksAndFeel.inc.xhtml | 19 ++++ .../browser/preferences/zen-preferences.ftl | 8 ++ .../en-US/browser/sidebarMenu-ftl.patch | 7 +- .../themes/shared/tabbrowser/tabs-css.patch | 22 ++--- .../themes/shared/zen-browser-shared.css | 64 +++++++++++++- src/browser/themes/shared/zen-icons/icons.css | 3 +- src/browser/themes/shared/zen-sidebar.css | 16 ++++ 13 files changed, 192 insertions(+), 99 deletions(-) create mode 100644 docs/changes.md diff --git a/docs/changes.md b/docs/changes.md new file mode 100644 index 000000000..be41ff8e5 --- /dev/null +++ b/docs/changes.md @@ -0,0 +1,12 @@ + +## Changed things that should be tested each release + +* Workspaces +* Sidebar +* Split views +* Vertical tabs (expanded and not expanded) +* Tab groups +* Welcome Page +* Overall performance +* Overall stability +* Overall UX diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index 239597d17..cdc244de7 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/src/browser/app/profile/zen-browser.js @@ -6,37 +6,16 @@ pref("browser.tabs.cardPreview.enabled", true); pref("browser.tabs.hoverPreview.enabled", true); pref("browser.tabs.cardPreview.delayMs", 100); -pref("browser.urlbar.suggest.calculator", true); - #ifdef MOZ_UPDATE_CHANNEL pref("devtools.debugger.prompt-connection", false); #endif -// Mozilla Services -pref('browser.privatebrowsing.vpnpromourl', ''); -pref("browser.vpn_promo.enabled", false); -pref("browser.contentblocking.report.show_mobile_app", false); -pref("browser.protections_panel.infoMessage.seen", true); -pref('extensions.getAddons.showPane', false); -pref('extensions.htmlaboutaddons.recommendations.enabled', false); -pref('browser.discovery.enabled', false); -pref('browser.newtabpage.activity-stream.asrouter.userprefs.cfr.addons', false); -pref( - 'browser.newtabpage.activity-stream.asrouter.userprefs.cfr.features', - false -); -pref('browser.preferences.moreFromMozilla', false); -pref('browser.aboutwelcome.enabled', true); -pref("browser.aboutwelcome.showModal", false); -pref('browser.translations.select.enable', true); - // Theme pref('toolkit.legacyUserProfileCustomizations.stylesheets', true); pref('browser.compactmode.show', true); pref('browser.display.focus_ring_on_anything', true); pref('browser.display.focus_ring_style', 0); pref('browser.display.focus_ring_width', 0); -pref('browser.privateWindowSeparation.enabled', false); // WINDOWS pref('browser.newtabpage.activity-stream.newtabWallpapers.enabled', true); pref('browser.translations.newSettingsUI.enable', true); @@ -44,11 +23,6 @@ pref('browser.translations.newSettingsUI.enable', true); pref("browser.urlbar.trimHttps", true); pref("browser.urlbar.untrimOnUserInteraction.featureGate", true); -// Cookie banner handling (reject by default) - -pref('cookiebanners.service.mode', 1); -pref('cookiebanners.service.mode.privateBrowsing', 1); - // Url bar pref('browser.urlbar.unitConversion.enabled', true); pref('browser.urlbar.trending.featureGate', false); @@ -61,45 +35,14 @@ pref('browser.newtabpage.activity-stream.feeds.topsites', false); pref('browser.newtabpage.activity-stream.feeds.section.topstories', false); pref("browser.topsites.contile.enabled", false); -// Pocket -pref('extensions.pocket.enabled', false); - // Pdf pref('browser.download.open_pdf_attachments_inline', true); pref('pdfjs.enableHighlightEditor', true); pref('pdfjs.enableHighlightFloatingButton', true); -// Tabs -pref('browser.bookmarks.openInTabClosesMenu', false); -pref('browser.menu.showViewImageInfo', true); -pref('findbar.highlightAll', true); -pref('layout.word_select.eat_space_to_next_word', false); -pref('privacy.userContext.enabled', true); -pref('privacy.userContext.ui.enabled', true); - // UA pref('general.useragent.compatMode.firefox', true); - -// Tracking protection - -pref( - 'urlclassifier.trackingSkipURLs', - '*.reddit.com, *.twitter.com, *.twimg.com, *.tiktok.com' -); -pref( - 'urlclassifier.features.socialtracking.skipURLs', - '*.instagram.com, *.twitter.com, *.twimg.com' -); -pref('network.cookie.sameSite.noneRequiresSecure', true); -pref('browser.download.start_downloads_in_tmp_dir', true); -pref('browser.helperApps.deleteTempFileOnExit', true); -pref('privacy.globalprivacycontrol.enabled', true); - -pref('gfx.canvas.accelerated.cache-items', 4096); -pref('gfx.canvas.accelerated.cache-size', 512); -pref('gfx.content.skia-font-cache-size', 20); -pref('gfx.webrender.all', true); pref('layout.css.backdrop-filter.enabled', true); pref("alerts.showFavicons", true); @@ -122,33 +65,8 @@ pref('zen.tabs.vertical', true); pref('zen.theme.accent-color', "#aac7ff"); pref('zen.theme.toolbar-themed', true); pref('zen.view.compact', false); - -pref('browser.cache.jsbc_compression_level', 3); - -pref('media.memory_cache_max_size', 65536); -pref('media.cache_readahead_limit', 7200); -pref('media.cache_resume_threshold', 3600); - -pref('image.mem.decode_bytes_at_a_time', 32768); - -pref('network.buffer.cache.size', 262144); -pref('network.buffer.cache.count', 128); -pref('network.http.max-connections', 1800); -pref('network.http.max-persistent-connections-per-server', 10); -pref('network.http.max-urgent-start-excessive-connections-per-host', 5); -pref('network.http.pacing.requests.enabled', false); -pref('network.dnsCacheExpiration', 3600); -pref('network.dns.max_high_priority_threads', 8); -pref('network.ssl_tokens_cache_capacity', 10240); - -pref('network.dns.disablePrefetch', true); -pref('network.prefetch-next', false); -pref('network.predictor.enabled', false); - -pref('layout.css.grid-template-masonry-value.enabled', true); -pref('dom.enable_web_task_scheduling', true); -pref('layout.css.has-selector.enabled', true); -pref('dom.security.sanitizer.enabled', true); +pref('zen.view.sidebar-expanded', false); +pref('zen.view.sidebar-expanded.show-button', true); pref('layers.acceleration.force-enabled', true); diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs index bf8ac23ae..4129e804b 100644 --- a/src/browser/base/content/ZenUIManager.mjs +++ b/src/browser/base/content/ZenUIManager.mjs @@ -22,3 +22,42 @@ var gZenUIManager = { SidebarController.toggle('viewBookmarksSidebar', button); }, }; + +var gZenVerticalTabsManager = { + init() { + //Services.prefs.addObserver('zen.view.compact', this._updateEvent.bind(this)); + //Services.prefs.addObserver('zen.view.sidebar-expanded', this._updateEvent.bind(this)); + }, + + //_updateEvent() { + // this._updateExpandButton(); + //}, + + get expanded() { + return Services.prefs.getBoolPref('zen.view.sidebar-expanded'); + }, + + get expandButton() { + if (this._expandButton) { + return this._expandButton; + } + this._expandButton = document.getElementById('zen-expand-sidebar-button'); + return this._expandButton; + }, + + //_updateExpandButton() { + // let isCompactMode = Services.prefs.getBoolPref('zen.view.compact'); + // let button = this.expandButton; + // let expanded = this.expanded; + // if (expanded && !isCompactMode) { + // button.setAttribute('open', 'true'); + // } else { + // button.removeAttribute('open'); + // } + //}, + + toggleExpand() { + let expanded = !this.expanded; + Services.prefs.setBoolPref('zen.view.sidebar-expanded', expanded); + }, +}; diff --git a/src/browser/base/content/zen-sidebar-icons.inc.xhtml b/src/browser/base/content/zen-sidebar-icons.inc.xhtml index 2dae62110..176a85337 100644 --- a/src/browser/base/content/zen-sidebar-icons.inc.xhtml +++ b/src/browser/base/content/zen-sidebar-icons.inc.xhtml @@ -3,6 +3,7 @@ + diff --git a/src/browser/base/content/zenThemeModifier.js b/src/browser/base/content/zenThemeModifier.js index 8ea753069..518fafdde 100644 --- a/src/browser/base/content/zenThemeModifier.js +++ b/src/browser/base/content/zenThemeModifier.js @@ -95,6 +95,8 @@ _zenInitBrowserLayout() { if (!this._inMainBrowserWindow) return; + if (this.__hasInitBrowserLayout) return; + this.__hasInitBrowserLayout = true; this.openWatermark(); console.log("ZenThemeModifier: init browser layout"); const kNavbarItems = [ @@ -120,6 +122,8 @@ const securityButton = document.getElementById("tracking-protection-icon-container"); document.getElementsByClassName("urlbar-input-container")[0].insertBefore(securityButton, document.getElementById("page-action-buttons")); + gZenVerticalTabsManager.init(); + const mainWindowEl = document.documentElement; // Dont override the sync avatar if it's already set if (mainWindowEl.style.hasOwnProperty("--avatar-image-url")) { diff --git a/src/browser/components/preferences/zen-settings.js b/src/browser/components/preferences/zen-settings.js index 432c4a30d..7360efab5 100644 --- a/src/browser/components/preferences/zen-settings.js +++ b/src/browser/components/preferences/zen-settings.js @@ -73,5 +73,15 @@ Preferences.addAll([ id: "zen.workspaces.enabled", type: "bool", default: true, + }, + { + id: "zen.view.sidebar-expanded.show-button", + type: "bool", + default: true, + }, + { + id: "zen.view.sidebar-expanded", + type: "bool", + default: true, } ]); diff --git a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml index ac2dbafbd..67c459122 100644 --- a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml +++ b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml @@ -42,4 +42,23 @@ preference="zen.sidebar.enabled"/> + + + + diff --git a/src/browser/locales/en-US/browser/preferences/zen-preferences.ftl b/src/browser/locales/en-US/browser/preferences/zen-preferences.ftl index fa8a1192f..43043babe 100644 --- a/src/browser/locales/en-US/browser/preferences/zen-preferences.ftl +++ b/src/browser/locales/en-US/browser/preferences/zen-preferences.ftl @@ -33,3 +33,11 @@ zen-settings-workspaces-header = General settings for workspaces zen-settings-workspaces-description = With workspaces, you can have multiple browsing sessions at once! zen-settings-workspaces-enabled = .label = Enable Workspaces (Experimental) + +zen-vertical-tabs-title = Sidebar and tabs layout +zen-vertical-tabs-header = Vertical Tabs +zen-vertical-tabs-description = Manage your tabs in a vertical layout +zen-vertical-tabs-show-expand-button = + .label = Show Expand Button +zen-vertical-tabs-expand-tabs-by-default = + .label = Expand Tabs by Default \ No newline at end of file diff --git a/src/browser/locales/en-US/browser/sidebarMenu-ftl.patch b/src/browser/locales/en-US/browser/sidebarMenu-ftl.patch index c8379f491..eb1ee0b2c 100644 --- a/src/browser/locales/en-US/browser/sidebarMenu-ftl.patch +++ b/src/browser/locales/en-US/browser/sidebarMenu-ftl.patch @@ -1,11 +1,14 @@ diff --git a/browser/locales/en-US/browser/sidebarMenu.ftl b/browser/locales/en-US/browser/sidebarMenu.ftl -index 746a2084df954f224ace4ce699623dfc618f0ada..ee84f78fe7ec3992d269d3ba103b62c846dc22b8 100644 +index e050a2302c6699ffcabad2db4d45267912297519..d4ff03ace4d08482b4a6de62c4f00016486cad84 100644 --- a/browser/locales/en-US/browser/sidebarMenu.ftl +++ b/browser/locales/en-US/browser/sidebarMenu.ftl -@@ -16,3 +16,6 @@ sidebar-menu-close = +@@ -19,3 +19,8 @@ sidebar-menu-close = sidebar-close-button = .tooltiptext = Close sidebar + +sidebar-zen-sidepanel = + .label = Side Panels ++sidebar-zen-expand = ++ .label = Expand Sidebar +\ No newline at end of file diff --git a/src/browser/themes/shared/tabbrowser/tabs-css.patch b/src/browser/themes/shared/tabbrowser/tabs-css.patch index 238bdb5a7..0ae49b8da 100644 --- a/src/browser/themes/shared/tabbrowser/tabs-css.patch +++ b/src/browser/themes/shared/tabbrowser/tabs-css.patch @@ -1,5 +1,5 @@ diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css -index 9a915ff442cc7f01ddec3fcea931c21e210cac92..19126b25ac7a63fe193628dd11a93507bd4bc63a 100644 +index 9a915ff442cc7f01ddec3fcea931c21e210cac92..701d0cdf4d5e5a1c2f6baf21c345a7e3b6f26592 100644 --- a/browser/themes/shared/tabbrowser/tabs.css +++ b/browser/themes/shared/tabbrowser/tabs.css @@ -39,7 +39,7 @@ @@ -29,16 +29,16 @@ index 9a915ff442cc7f01ddec3fcea931c21e210cac92..19126b25ac7a63fe193628dd11a93507 display: block; } } -@@ -360,7 +360,7 @@ - &[selected]:not([src], [pinned], [crashed], [pictureinpicture]), - &:not([src], [pinned], [crashed], [sharing], [pictureinpicture]), - &[busy] { -- display: none; -+ /*display: none;*/ +@@ -357,8 +357,6 @@ + animation-delay: -1.5s; } - } -@@ -627,7 +627,7 @@ +- &[selected]:not([src], [pinned], [crashed], [pictureinpicture]), +- &:not([src], [pinned], [crashed], [sharing], [pictureinpicture]), + &[busy] { + display: none; + } +@@ -627,7 +625,7 @@ #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) { /* Add a gap between the last pinned tab and the first visible tab */ @@ -47,7 +47,7 @@ index 9a915ff442cc7f01ddec3fcea931c21e210cac92..19126b25ac7a63fe193628dd11a93507 } .tab-label[attention]:not([selected]) { -@@ -737,6 +737,7 @@ +@@ -737,6 +735,7 @@ .titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] { width: 40px; @@ -55,7 +55,7 @@ index 9a915ff442cc7f01ddec3fcea931c21e210cac92..19126b25ac7a63fe193628dd11a93507 } @media (max-width: 500px) { -@@ -752,7 +753,7 @@ +@@ -752,7 +751,7 @@ toolbarbutton:not(#firefox-view-button), toolbarpaletteitem:not(#wrapper-firefox-view-button) ) + #tabbrowser-tabs { diff --git a/src/browser/themes/shared/zen-browser-shared.css b/src/browser/themes/shared/zen-browser-shared.css index 6814f32ff..71d1c65b2 100644 --- a/src/browser/themes/shared/zen-browser-shared.css +++ b/src/browser/themes/shared/zen-browser-shared.css @@ -380,7 +380,7 @@ toolbarbutton#scrollbutton-up { .tab-close-button { position: absolute; display: none; - left: 50%; + left: 0; top: 50%; } @@ -615,3 +615,65 @@ panelmultiview { opacity: 0; pointer-events: none; } + +/* Expanded sidebar */ + +@media (-moz-bool-pref: "zen.view.sidebar-expanded") { + #navigator-toolbox { + min-width: 170px; + align-items: start; + padding-left: 10px; + padding-right: 10px; + } + + .tab-label-container { + display: block; + } + + #titlebar, + #TabsToolbar, + #TabsToolbar .toolbar-items { + width: 100%; + align-items: flex-start; + } + + .tabbrowser-tab { + width: 100%; + + &:hover .tab-close-button { + display: block !important; + } + + & .tab-content { + position: relative; + width: 100%; + } + + & .tab-stack { + justify-content: start; + padding: 10px; + } + } + + #zen-workspaces-button { + width: -moz-available !important; + } + + .tab-label-container { + + #tabbrowser-tabs:not([secondarytext-unsupported]) & { + display: flex; + align-items: center; + padding-left: 10px; + } + } + + #zen-sidebar-icons-wrapper { + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + transition: .1s; + border-top: 1px solid var(--zen-colors-border); + padding-top: 10px; + } +} \ No newline at end of file diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css index d36e35605..1a4d4a5fd 100644 --- a/src/browser/themes/shared/zen-icons/icons.css +++ b/src/browser/themes/shared/zen-icons/icons.css @@ -355,7 +355,8 @@ } #PlacesChevron, -#urlbar-go-button { +#urlbar-go-button, +#zen-expand-sidebar-button { list-style-image: url("arrow-right.svg") !important; } diff --git a/src/browser/themes/shared/zen-sidebar.css b/src/browser/themes/shared/zen-sidebar.css index 8856281aa..94206f77e 100644 --- a/src/browser/themes/shared/zen-sidebar.css +++ b/src/browser/themes/shared/zen-sidebar.css @@ -174,3 +174,19 @@ display: none; } +#zen-expand-sidebar-button { + display: none; +} + +@media (-moz-bool-pref: "zen.view.sidebar-expanded") { + #zen-expand-sidebar-button { + display: block; /* TODO? */ + } +} + +@media (-moz-bool-pref: "zen.view.sidebar-expanded.show-button") { + #zen-expand-sidebar-button { + display: block; + } +} +