chore: Update theme pill-button default value and styles

.github/workflows/src/alpha-build.sh

@@ -1,5 +1,6 @@
 set -ex
 
+export ZEN_RELEASE=1
 
 if command -v apt-get &> /dev/null
 then

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

@@ -64,6 +64,7 @@ pref('zen.welcomeScreen.seen', false);
 pref('zen.tabs.vertical', true);
 pref('zen.theme.accent-color', "#aac7ff");
 pref('zen.theme.toolbar-themed', true);
+pref('zen.theme.pill-button', false);
 pref('zen.view.compact', false);
 pref('zen.view.sidebar-expanded', false);
 pref('zen.view.sidebar-expanded.show-button', true);

src/browser/base/content/zenThemeModifier.js

@@ -70,8 +70,6 @@ var ZenThemeModifier = {
   updateExtraBrowserStyles() {
     // If we are in the main browser window, we can add some extra styles.
     if (!this._inMainBrowserWindow) return;
-    document.documentElement.style.setProperty("--zen-appcontent-separator-from-window-single", "0px");
-    document.documentElement.style.setProperty("--zen-appcontent-border-radius", "0px");
     this._changeSidebarLocation();
   },
 
@@ -178,7 +176,7 @@ var ZenThemeModifier = {
     if (document.documentElement.hasAttribute("privatebrowsingmode")) {
       avatarUrl = "chrome://global/skin/icons/indicator-private-browsing.svg";
     }
-    console.log("ZenThemeModifier: setting avatar image to", avatarUrl);
+    // console.log("ZenThemeModifier: setting avatar image to", avatarUrl);
     mainWindowEl.style.setProperty("--zen-avatar-image-url", `url(${avatarUrl})`);
     mainWindowEl.style.setProperty("--avatar-image-url", `var(--zen-avatar-image-url)`, "important");
   },

src/browser/components/newtab/content-src/components/Search/_Search-scss.patch

@@ -0,0 +1,13 @@
+diff --git a/browser/components/newtab/content-src/components/Search/_Search.scss b/browser/components/newtab/content-src/components/Search/_Search.scss
+index 8ee4f7f13276c0aabcb1dd131307cbc6d0907fbf..dd3e22740cd4dcbb6a4b974165c3ccd1cd9cec70 100644
+--- a/browser/components/newtab/content-src/components/Search/_Search.scss
++++ b/browser/components/newtab/content-src/components/Search/_Search.scss
+@@ -17,6 +17,8 @@ $glyph-forward: url('chrome://browser/skin/forward.svg');
+     $logo-size: 82px;
+     $wordmark-size: 134px;
+ 
++    display: none;
++
+     align-items: center;
+     display: flex;
+     justify-content: center;

src/browser/components/preferences/zen-settings.js

@@ -83,5 +83,10 @@ Preferences.addAll([
     id: "zen.view.sidebar-expanded",
     type: "bool",
     default: true,
+  },
+  {
+    id: "zen.theme.pill-button",
+    type: "bool",
+    default: true,
   }
 ]);

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

@@ -24,6 +24,13 @@
       <checkbox id="zenLooksAndFeelUseThemedToolbar"
             data-l10n-id="zen-look-and-feel-compact-view-enabled"
             preference="zen.view.compact"/>
+
+      <label><html:h2 data-l10n-id="zen-look-and-feel-buttons-header"/></label>
+      <description class="description-deemphasized" data-l10n-id="zen-look-and-feel-buttons-description" />
+
+      <checkbox id="zenLooksAndFeelPilledButtons"
+            data-l10n-id="zen-look-and-feel-pilled-buttons"
+            preference="zen.theme.pill-button"/>
 </groupbox>
 
 <hbox id="zenSidePanelsCategory"

src/browser/locales/en-US/browser/preferences/zen-preferences.ftl

@@ -21,7 +21,11 @@ zen-look-and-feel-compact-view-description = Only show the toolbars you use!
 zen-look-and-feel-compact-view-enabled = 
     .label = Enable { -brand-short-name }'s compact mode
 
+zen-look-and-feel-buttons-header = Button style
+zen-look-and-feel-buttons-description = Choose the style of buttons you want to see
 
+zen-look-and-feel-pilled-buttons = 
+    .label = Pilled Buttons
 
 pane-zen-workspaces-title = Workspaces
 category-zen-workspaces =

src/browser/themes/shared/zen-browser-shared.css

@@ -24,6 +24,8 @@
   --input-bgcolor: var(--zen-colors-tertiary) !important;
   --input-border-color: var(--zen-input-border-color) !important;
   --zen-themed-toolbar-bg: var(--zen-colors-tertiary);
+
+  --toolbar-field-background-color: var(--zen-colors-input-bg) !important;
 }
 
 @media not (-moz-bool-pref: "zen.theme.toolbar-themed") {
@@ -209,13 +211,13 @@ button.popup-notification-dropmarker {
 
 #navigator-toolbox {
   min-width: 55px;
+  max-width: 55px;
 }
 
 #navigator-toolbox toolbar#TabsToolbar {
   margin: var(--zen-appcontent-separator-from-window);
   overflow: hidden;
   transition: .2s;
-  border-radius: var(--zen-appcontent-border-radius) !important;
   flex-direction: column !important;
   padding: 5px 0;
   margin-right: 0 !important;

src/toolkit/content/zen-xul.css

@@ -2,10 +2,7 @@
 @import url("zen-fullscreen-override.css");
 
 :root {
-  --zen-main-browser-background: red; 
-  --zen-appcontent-separator-from-window-single: 7px;
-  --zen-appcontent-separator-from-window: var(--zen-appcontent-separator-from-window-single);
-  --zen-appcontent-border-radius: var(--zen-panel-radius);
+  --zen-main-browser-background: transparent;
   --zen-appcontent-border: 1px solid var(--zen-colors-border);
   --zen-browser-border-radius: var(--zen-panel-radius);
 }
@@ -24,9 +21,7 @@ html#main-window > body {
 }
 
 :not([inDOMFullscreen="true"]) #appcontent {
-  border-radius: var(--zen-appcontent-border-radius);
   overflow: hidden;
-  margin: var(--zen-appcontent-separator-from-window);
 }
 
 #appcontent {

src/toolkit/themes/shared/in-content/zen-common-shared-ui-override.css

@@ -8,13 +8,13 @@
 xul|button {
   border-radius: var(--zen-button-border-radius) !important;
   padding: var(--zen-button-padding) !important;
-  transition: .2s;
+  transition: .1s;
   min-width: 100px !important;
   font-weight: 500 !important;
 }
 
 button:active {
-  transform: scale(0.97);
+  transform: scale(0.95);
 }
 
 html|button:not(:is(

src/toolkit/themes/shared/in-content/zen-common-shared.css

@@ -74,7 +74,7 @@
   --in-content-page-background: var(--zen-colors-tertiary) !important;
   --zen-in-content-dialog-background: var(--zen-colors-tertiary);
 
-  --zen-button-border-radius: 8px;
+  --zen-button-border-radius: 7px;
   --zen-button-padding: .6rem 1.2rem;
 
   /* Other colors */
@@ -82,8 +82,6 @@
   --zen-input-border-color: light-dark(rgb(204, 204, 204), rgb(66, 65, 77)) !important;
 
   --zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 50%, white 50%);
-
-  /* TODO: Support dark themes! */
 }
 
 @media (prefers-color-scheme: dark) {
@@ -112,3 +110,9 @@ window#commonDialogWindow {
   background-color: var(--zen-in-content-dialog-background) !important;
 }
 
+@media (-moz-bool-pref: "zen.theme.pill-button") {
+  :host(:is(.anonymous-content-host, notification-message)),
+  :root {
+    --zen-button-border-radius: 20px;
+  }
+}

src/toolkit/themes/shared/zen-global-shared.css

@@ -2,11 +2,11 @@
 @import url("./in-content/zen-common-shared.css");
 
 :root {
-  --zen-panel-radius: 15px;
+  --zen-panel-radius: 9px;
 
   --arrowpanel-background: var(--zen-dialog-background) !important;
   --arrowpanel-border-color: var(--zen-dialog-border-color) !important;
-  --arrowpanel-border-radius: 12px !important;
+  --arrowpanel-border-radius: var(--zen-panel-radius) !important;
 
   &:-moz-lwtheme {
     color: var(--lwt-text-color);