Worked a bit more on profiles

src/browser/base/content/browser-js.patch

@@ -1,8 +1,33 @@
 diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
-index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..08479bc88fbff504ce20eddd394f225cfe4f083a 100644
+index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..78915f32ef912e44fa68f809fbc9cffdcc97f41a 100644
 --- a/browser/base/content/browser.js
 +++ b/browser/base/content/browser.js
-@@ -6660,7 +6660,7 @@ function setToolbarVisibility(
+@@ -13,6 +13,13 @@ ChromeUtils.importESModule("resource://gre/modules/NotificationDB.sys.mjs");
+ 
+ // lazy module getters
+ 
++XPCOMUtils.defineLazyServiceGetter(
++  this,
++  "ProfileService",
++  "@mozilla.org/toolkit/profile-service;1",
++  "nsIToolkitProfileService"
++);
++
+ ChromeUtils.defineESModuleGetters(this, {
+   AMTelemetry: "resource://gre/modules/AddonManager.sys.mjs",
+   AboutNewTab: "resource:///modules/AboutNewTab.sys.mjs",
+@@ -2424,6 +2431,10 @@ var gBrowserInit = {
+         "browser-idle-startup-tasks-finished"
+       );
+     });
++
++    // ZEN: Propagate the current profile used to the browser UI, such as 
++    // showing the avatar and profile info to the side bar
++    scheduleIdleTask(zenUpdateBrowserProfiles);
+   },
+ 
+   // Returns the URI(s) to load at startup if it is immediately known, or a
+@@ -6660,7 +6671,7 @@ function setToolbarVisibility(
        );
      }
  
@@ -11,3 +36,20 @@ index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..08479bc88fbff504ce20eddd394f225c
      switch (isVisible) {
        case true:
        case "always":
+@@ -10157,3 +10168,16 @@ var FirefoxViewHandler = {
+     this.button?.toggleAttribute("attention", shouldShow);
+   },
+ };
++
++function zenUpdateBrowserProfiles() {
++  const mainWindowEl = document.documentElement;
++  // Dont override the sync avatar if it's already set
++  if (mainWindowEl.style.hasOwnProperty("--avatar-image-url")) {
++    return;
++  }
++  let profile = ProfileService.currentProfile;
++  // TODO: actually use profile data to generate the avatar, instead of just using the name
++  console.log(profile)
++  const url = `url(https://source.boringavatars.com/beam/120/${encodeURIComponent(profile.name)}?colors=fac89a,e290ff)`;
++  mainWindowEl.style.setProperty("--avatar-image-url", url);
++} 

src/browser/base/content/zen-panels-ui.inc.xhtml

@@ -1,7 +1,6 @@
 <panelview id="PanelUI-zen-profiles" side="right">
   <vbox class="panel-subview-body">
-    <div id="PanelUI-zen-profiles-header">
-      
-    </div>
+    <div id="PanelUI-zen-profiles-header"></div>
+    <div id="PanelUI-zen-profiles-user-picture" />
   </vbox>
 </panelview>

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

@@ -1,5 +1,5 @@
 <toolbar id="zen-sidebar-icons-wrapper">
-  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-profile-button" data-l10n-id="toolbar-button-account" onclick="PanelUI.showSubView('PanelUI-zen-profiles', this, event)"></toolbarbutton>
+  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-profile-button" data-l10n-id="toolbar-button-account" onclick="PanelUI.showSubView('PanelUI-zen-profiles', this, event)"><div></div></toolbarbutton>
   <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-bookmark-button" data-l10n-id="sidebar-menu-bookmarks" onclick="SidebarUI.show('viewBookmarksSidebar');"></toolbarbutton>
   <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-history-button" data-l10n-id="sidebar-menu-history" onclick="SidebarUI.show('viewHistorySidebar');"></toolbarbutton>
   <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-preferences-button" data-l10n-id="toolbar-settings-button" onclick="event.target.ownerGlobal.openPreferences(undefined);"></toolbarbutton>

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

@@ -1,12 +1,28 @@
 
 #PanelUI-zen-profiles {
-  --menu-panel-width: 8em;
+  --menu-panel-width: 20em;
 }
 
 #PanelUI-zen-profiles-header {
   width: -moz-available;
-  height: 200px;
+  height: 100px;
   border-radius: var(--panel-border-radius);
   background: var(--zen-main-browser-background);
   margin: 5px;
-}
+  box-shadow: var(--zen-sidebar-box-shadow) !important;
+}
+
+#PanelUI-zen-profiles-user-picture {
+  background-image: var(--avatar-image-url);
+  transform: translateY(-50%);
+  width: 80px;
+  height: 80px;
+  border: 5px var(--arrowpanel-background) solid;
+  background-color: var(--arrowpanel-background);
+  border-radius: 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  margin: 0 auto;
+  
+}

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

@@ -103,7 +103,18 @@
 }
 
 #zen-profile-button {
-  list-style-image: var(--avatar-image-url);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#zen-profile-button > div {
+  background-image: var(--avatar-image-url);
+  border-radius: 50%;
+  background-size: cover;
+  background-position: center;
+  width: 20px;
+  height: 20px;
 }
 
 /* Ugly code */