Update Zen Browser theme and sidebar styling

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

@@ -74,7 +74,7 @@ pref('zen.tabs.vertical', true);
 pref('zen.tabs.vertical.right-side', false);
 pref('zen.theme.accent-color', "#aac7ff");
 pref('zen.theme.border-radius', 5); // In pixels
-pref('zen.theme.content-element-separation', 8); // In pixels
+pref('zen.theme.content-element-separation', 6); // In pixels
 pref('zen.theme.toolbar-themed', true);
 pref('zen.theme.pill-button', false);
 pref('zen.view.compact', false);

src/browser/base/content/ZenStartup.mjs

@@ -9,6 +9,7 @@
   );
   var ZenStartup = {
     init() {
+      this.logHeader();
       this.openWatermark();
       window.SessionStore.promiseInitialized.then(async () => {
         this._changeSidebarLocation();
@@ -173,7 +174,21 @@
           mode="icons">
           <hbox id="zen-sidebar-top-buttons-customization-target" class="customization-target" flex="1">
             <toolbarbutton removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" data-l10n-id="sidebar-zen-expand" cui-areatype="toolbar" oncommand="gZenVerticalTabsManager.toggleExpand();"></toolbarbutton>
-            <toolbarbutton removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button chromeclass-toolbar-additional subviewbutton-nav" badge="true" closemenu="none" delegatesanchor="true" cui-areatype="toolbar" id="zen-profile-button" data-l10n-id="toolbar-button-account" onclick="ZenProfileDialogUI.showSubView(this, event)"></toolbarbutton>  
+            <toolbarbutton id="zen-profile-button" 
+              class="zen-sidebar-action-button toolbarbutton-1 chromeclass-toolbar-additional subviewbutton-nav"
+              badged="true"
+              delegatesanchor="true"
+              onmousedown="ZenProfileDialogUI.showSubView(this, event)"
+              onkeypress="ZenProfileDialogUI.showSubView(this, event)"
+              consumeanchor="zen-profile-button"
+              closemenu="none"
+              data-l10n-id="toolbar-button-account"
+              cui-areatype="toolbar"
+              removable="true">
+              <vbox>
+                <image id="zen-profile-button-icon" />
+              </vbox>
+            </toolbarbutton>
           </hbox>
         </toolbar>
       `);
@@ -234,6 +249,21 @@
     _focusSearchBar() {
       gURLBar.focus();
     },
+
+    logHeader() {
+      console.info(`
+
+    Welcome to Zen Browser!
+
+  If you are seeing this message, it means that you have successfully opened Zen's developer console.
+  Here you can see all the logs and errors that Zen is generating.
+
+  If you have any questions or need help, please contact us in any media in https://zen-browser.app/
+
+  Note: This developer console is not the same as the browser console, it has access to Zen's internal functions and variables,
+  including your passwords and other sensitive information. Please do not paste any code here unless you know what you are doing.
+`);
+    }
   };
 
   ZenStartup.init();

src/browser/base/content/zen-styles/zen-compact-mode.css

@@ -20,11 +20,11 @@
       /* Set the extra paddings */
       #tabbrowser-tabpanels {
         #browser:has(#navigator-toolbox[zen-right-side='true']) & {
-          padding-right: var(--zen-element-separation);
+          padding-right: var(--zen-element-separation) !important;
         }
 
         #browser:has(#navigator-toolbox:not([zen-right-side='true'])) & {
-          padding-left: var(--zen-element-separation);
+          padding-left: var(--zen-element-separation) !important;
         }
       }
 

src/browser/base/content/zen-styles/zen-sidebar.css

@@ -4,35 +4,15 @@ toolbar {
 }
 
 #zen-profile-button {
-  display: flex;
-  justify-content: center;
-  position: relative;
-  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;
-    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;
-    }
+  & #zen-profile-button-icon {
+    width: 16px;
+    height: 16px;
+    list-style-image: var(--avatar-image-url);
+    border-radius: 50%;
+    pointer-events: none;
+    list-style-image: var(--avatar-image-url);
+    -moz-context-properties: fill;
+    fill: currentColor;
   }
 }
 

src/browser/components/places/content/zenNewWebPanel.js

@@ -34,7 +34,7 @@ var gZenNewWebPanel = {
   handleDialogAccept: async function (aEvent) {
     document.commandDispatcher.focusedElement?.blur();
     let url = document.getElementById('zenNWP_url');
-    let ua = document.getElementById('zenNWP_userAgent');
+    let ua = document.getElementById('zenNWP_userAgent'); // checbkox
     if (!url || !ua) {
       return;
     }
@@ -44,12 +44,12 @@ var gZenNewWebPanel = {
     } catch (_) {
       urlValue = this.addHttpIfMissing(url.value);
     }
-    if (!url.value || !ua.value) {
+    if (!url.value) {
       return;
     }
     let newSite = {
       url: urlValue,
-      ua: ua.value,
+      ua: ua.checked,
     };
     let currentData = JSON.parse(Services.prefs.getStringPref('zen.sidebar.data'));
     let newName = 'p' + new Date().getTime();