diff --git a/src/browser/base/content/browser-js.patch b/src/browser/base/content/browser-js.patch index e70d0f5d8..ed4d273ed 100644 --- a/src/browser/base/content/browser-js.patch +++ b/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); ++} diff --git a/src/browser/base/content/zen-panels-ui.inc.xhtml b/src/browser/base/content/zen-panels-ui.inc.xhtml index 596f88a2a..42089ed86 100644 --- a/src/browser/base/content/zen-panels-ui.inc.xhtml +++ b/src/browser/base/content/zen-panels-ui.inc.xhtml @@ -1,7 +1,6 @@ -
- -
+
+
\ No newline at end of file diff --git a/src/browser/base/content/zen-sidebar-icons.inc.xhtml b/src/browser/base/content/zen-sidebar-icons.inc.xhtml index ee4bf164c..5135ab20f 100644 --- a/src/browser/base/content/zen-sidebar-icons.inc.xhtml +++ b/src/browser/base/content/zen-sidebar-icons.inc.xhtml @@ -1,5 +1,5 @@ - +
diff --git a/src/browser/themes/shared/zen-panel-ui.css b/src/browser/themes/shared/zen-panel-ui.css index 7ca18434f..339941dd2 100644 --- a/src/browser/themes/shared/zen-panel-ui.css +++ b/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; -} \ No newline at end of file + 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; + +} diff --git a/src/browser/themes/shared/zen-sidebar.css b/src/browser/themes/shared/zen-sidebar.css index aa6fd39a4..bc83f1dde 100644 --- a/src/browser/themes/shared/zen-sidebar.css +++ b/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 */