mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-02-21 02:46:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: Update Zen Browser preferences and styles for vertical tabs layout

Browse Source
This commit is contained in:
Mauro Balades
2024-07-19 19:15:01 +02:00
parent d3900ca905
commit 628a0bf269
13 changed files with 192 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/changes.md Normal file
View File

@@ -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

86
src/browser/app/profile/zen-browser.js
View File

@@ -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);

39
src/browser/base/content/ZenUIManager.mjs
View File

@@ -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);
},
};

1
src/browser/base/content/zen-sidebar-icons.inc.xhtml
View File

@@ -3,6 +3,7 @@
<html:div class="zen-side-bar-profiles-button-panel-correction"></html:div>
<html:div></html:div>
</toolbarbutton>
<toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" data-l10n-id="sidebar-zen-expand" oncommand="gZenVerticalTabsManager.toggleExpand();"></toolbarbutton>
<toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
<toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-bookmark-button" data-l10n-id="sidebar-menu-bookmarks" onclick="gZenUIManager.toogleBookmarksSidebar();"></toolbarbutton>
<toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-history-button" data-l10n-id="sidebar-menu-history" oncommand="PanelUI.showSubView('PanelUI-history', this);"></toolbarbutton>

4
src/browser/base/content/zenThemeModifier.js
View File

@@ -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")) {

10
src/browser/components/preferences/zen-settings.js
View File

@@ -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,
}
]);

19
src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
View File

@@ -42,4 +42,23 @@
preference="zen.sidebar.enabled"/>
</groupbox>
<hbox id="zenVerticalTabsCategory"
class="subcategory"
hidden="true"
data-category="paneZenLooks">
<html:h1 data-l10n-id="zen-vertical-tabs-title"/>
</hbox>
<groupbox id="zenVerticalTabsGroup" data-category="paneZenLooks" hidden="true" class="highlighting-group">
<label><html:h2 data-l10n-id="zen-vertical-tabs-header"/></label>
<description class="description-deemphasized" data-l10n-id="zen-vertical-tabs-description" />
<checkbox id="zenLooksAndFeelShowTabExpandButton"
data-l10n-id="zen-vertical-tabs-show-expand-button"
preference="zen.view.sidebar-expanded.show-button"/>
<checkbox id="zenLooksAndFeelExpandTabsByDefault"
data-l10n-id="zen-vertical-tabs-expand-tabs-by-default"
preference="zen.view.sidebar-expanded"/>
</groupbox>
</html:template>

8
src/browser/locales/en-US/browser/preferences/zen-preferences.ftl
View File

@@ -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

7
src/browser/locales/en-US/browser/sidebarMenu-ftl.patch
View File

@@ -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

22
src/browser/themes/shared/tabbrowser/tabs-css.patch
View File

@@ -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 {

64
src/browser/themes/shared/zen-browser-shared.css
View File

@@ -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;
}
}

3
src/browser/themes/shared/zen-icons/icons.css
View File

@@ -355,7 +355,8 @@
}
#PlacesChevron,
#urlbar-go-button {
#urlbar-go-button,
#zen-expand-sidebar-button {
list-style-image: url("arrow-right.svg") !important;
}

16
src/browser/themes/shared/zen-sidebar.css
View File

@@ -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;
}
}