chore: Update Zen Browser preferences and styles for vertical tabs la…

…yout

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

src/browser/app/profile/zen-browser.js

@@ -6,49 +6,23 @@ 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);
 
 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);
 

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

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

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

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

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

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

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

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

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

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,15 +47,15 @@ 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;
 +  display: none !important;
  }
 
  @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 {