Finished profile panel UI

.gluon/command

@@ -1 +1 @@
-build
+run

.gluon/patchCount

@@ -1 +1 @@
-45
+47

src/browser/base/content/global-scripts-inc.patch

@@ -0,0 +1,11 @@
+diff --git a/browser/base/content/global-scripts.inc b/browser/base/content/global-scripts.inc
+index f5f43b8f9509c37bf217b3ed1c6c562be85430e0..c8ab55760f817aa14e3db15f6b5556118e65d218 100644
+--- a/browser/base/content/global-scripts.inc
++++ b/browser/base/content/global-scripts.inc
+@@ -22,4 +22,6 @@ if (AppConstants.platform == "macosx") {
+   Services.scriptloader.loadSubScript("chrome://global/content/macWindowMenu.js", this);
+ }
+ 
++Services.scriptloader.loadSubScript("chrome://browser/content/zen-browser-places.js", this);
++
+ </script>

src/browser/base/content/webext-panels-xhtml.patch

@@ -0,0 +1,12 @@
+diff --git a/browser/base/content/webext-panels.xhtml b/browser/base/content/webext-panels.xhtml
+index 902fa7e7b3edb3c9502a12e475ade016436b2490..5c6ad5f9d86cd29a12483d7cb71ce9979002f092 100644
+--- a/browser/base/content/webext-panels.xhtml
++++ b/browser/base/content/webext-panels.xhtml
+@@ -16,6 +16,7 @@
+   <script src="chrome://global/content/globalOverlay.js"/>
+   <script src="chrome://browser/content/utilityOverlay.js"/>
+   <script src="chrome://global/content/editMenuOverlay.js"/>
++  <script src="chrome://browser/content/zen-browser-places.js"/>
+ 
+   <linkset>
+     <html:link rel="stylesheet" href="chrome://global/skin/global.css" />

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

@@ -339,7 +339,7 @@
     <toolbarbutton id="fxa-toolbar-menu-button" class="toolbarbutton-1 chromeclass-toolbar-additional subviewbutton-nav"
                   badged="true"
                   delegatesanchor="true"
-                  onmousedown="gSync.toggleAccountPanel(this, event)"
+                  onmousedown="ZenProfileDialogUI.showSubView(this, event)"
                   onkeypress="gSync.toggleAccountPanel(this, event)"
                   consumeanchor="fxa-toolbar-menu-button"
                   closemenu="none"

src/browser/base/content/zen-browser-places.js

@@ -0,0 +1,141 @@
+
+var ZenProfileDialogUI = {
+  showSubView(parent, event) {
+    let element = parent.querySelector('.zen-side-bar-profiles-button-panel-correction') || parent;
+    PanelUI.showSubView('PanelUI-zen-profiles', element, event);
+    this._updateProfilesList();
+    this._updateCurentProfileId();
+  },
+
+  _updateProfilesList() {
+    let parentList = document.getElementById('PanelUI-zen-profiles-list');
+    this._emptyUserList(parentList);
+    console.log(ProfileService.profiles)
+    if (this._getProfilesSize(ProfileService.profiles) <= 1) {
+      return;
+    }
+    parentList.appendChild(document.createElement('toolbarseparator'));
+    for (let profile of ProfileService.profiles) {
+      if (profile == ProfileService.currentProfile) {
+        continue;
+      }
+      let item = document.createElement('menu');
+      item.onclick = () => this._openProfile(profile);
+      item.className = 'PanelUI-zen-profiles-item';
+      let avatar = document.createElement('img');
+      avatar.className = 'PanelUI-zen-profiles-item-avatar';
+      let name = document.createElement('div');
+      name.className = 'PanelUI-zen-profiles-item-name';
+      name.appendChild(document.createTextNode(profile.name));
+      name.container = true;
+      avatar.setAttribute('src', profile.zenAvatarPath);
+      item.appendChild(avatar);
+      item.appendChild(name);
+      parentList.appendChild(item);
+    }
+  },
+
+  _emptyUserList(element) {
+    element.innerHTML = '';
+  },
+
+  _updateCurentProfileId() {
+    let currentProfile = ProfileService.currentProfile;
+    let nameContainer = document.getElementById("PanelUI-zen-profiles-current-name");
+    nameContainer.textContent = currentProfile.name;
+  },
+
+  _openProfile(profile) {
+    Services.startup.createInstanceWithProfile(profile);
+  },
+
+  _getProfilesSize(profiles) {
+    let size = 0;
+    for (let _ of profiles) {
+      size += 1;
+    }
+    return size;
+  },
+
+  createProfileWizard() {
+    // This should be rewritten in HTML eventually.
+    window.browsingContext.topChromeWindow.openDialog(
+      "chrome://mozapps/content/profile/createProfileWizard.xhtml",
+      "",
+      "centerscreen,chrome,modal,titlebar",
+      ProfileService,
+      { CreateProfile: async (profile) => {
+        try {
+          ProfileService.defaultProfile = profile;
+          this._flush();
+        } catch (e) {
+          // This can happen on dev-edition.
+          let [title, msg] = await document.l10n.formatValues([
+            { id: "profiles-cannot-set-as-default-title" },
+            { id: "profiles-cannot-set-as-default-message" },
+          ]);
+      
+          Services.prompt.alert(window, title, msg);
+        }
+      } }
+    );
+  },
+
+  async _flush() {
+    try {
+      ProfileService.flush();
+      this._updateProfilesList();
+    } catch (e) {
+      let [title, msg, button] = await document.l10n.formatValues([
+        { id: "profiles-flush-fail-title" },
+        {
+          id:
+            e.result == Cr.NS_ERROR_DATABASE_CHANGED
+              ? "profiles-flush-conflict"
+              : "profiles-flush-failed",
+        },
+        { id: "profiles-flush-restart-button" },
+      ]);
+  
+      const PS = Ci.nsIPromptService;
+      let result = Services.prompt.confirmEx(
+        window,
+        title,
+        msg,
+        PS.BUTTON_POS_0 * PS.BUTTON_TITLE_CANCEL +
+          PS.BUTTON_POS_1 * PS.BUTTON_TITLE_IS_STRING,
+        null,
+        button,
+        null,
+        null,
+        {}
+      );
+      if (result == 1) {
+        this._restart(false);
+      }
+    }
+  },
+
+  _restart(safeMode) {
+    let cancelQuit = Cc["@mozilla.org/supports-PRBool;1"].createInstance(
+      Ci.nsISupportsPRBool
+    );
+    Services.obs.notifyObservers(
+      cancelQuit,
+      "quit-application-requested",
+      "restart"
+    );
+  
+    if (cancelQuit.data) {
+      return;
+    }
+  
+    let flags = Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart;
+  
+    if (safeMode) {
+      Services.startup.restartInSafeMode(flags);
+    } else {
+      Services.startup.quit(flags);
+    }
+  }
+};

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

@@ -1,6 +1,17 @@
 <panelview id="PanelUI-zen-profiles" position="bottomleft topleft" side="right">
-  <vbox class="panel-subview-body">
+  <vbox>
-    <div id="PanelUI-zen-profiles-header"></div>
+    <html:div id="PanelUI-zen-profiles-header">
-    <div id="PanelUI-zen-profiles-user-picture" />
+      <html:div id="PanelUI-zen-profiles-user-picture"></html:div>
+    </html:div>
+    <vbox id="PanelUI-zen-profiles-current-info">
+      <label id="PanelUI-zen-profiles-current-name"></label>
+      <p id="PanelUI-zen-profiles-current-profile-current" data-l10n-id="zen-panel-ui-current-profile-text"></p>
+    </vbox>
+    <vbox id="PanelUI-zen-profiles-list">      
+    </vbox>
+    <toolbarseparator />
+    <menuitem command="Tools:PrivateBrowsing" data-l10n-id="appmenuitem-new-private-window" class="PanelUI-zen-profiles-item"></menuitem>
+    <menuitem oncommand="alert('todo: open about:profiles!');" data-l10n-id="appmenuitem-new-zen-profiles-tab" class="PanelUI-zen-profiles-item"></menuitem>
+    <menuitem oncommand="ZenProfileDialogUI.createProfileWizard();" data-l10n-id="appmenuitem-new-zen-create-profile" class="PanelUI-zen-profiles-item"></menuitem>
   </vbox>
 </panelview>

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

@@ -1,5 +1,8 @@
 <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)"><div></div></toolbarbutton>
+  <toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-profile-button" data-l10n-id="toolbar-button-account" onclick="ZenProfileDialogUI.showSubView(this, event)">
+    <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-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/base/jar-mn.patch

@@ -1,11 +1,11 @@
 diff --git a/browser/base/jar.mn b/browser/base/jar.mn
-index e3eb0e6e5f30152905456a07cfe532fe173375fb..15968304e9597e8bfc08cd03dc7615d1a5ff7f7f 100644
+index e3eb0e6e5f30152905456a07cfe532fe173375fb..15e742e4cfd9df8eef815f80a4d668f118108c4c 100644
 --- a/browser/base/jar.mn
 +++ b/browser/base/jar.mn
-@@ -105,3 +105,5 @@ browser.jar:
+@@ -105,3 +105,6 @@ browser.jar:
  
  # L10n resources and overrides.
  % override chrome://global/locale/appstrings.properties chrome://browser/locale/appstrings.properties
 +
 +#include content/zen-avatars/jar.inc.mn
-\ No newline at end of file
++        content/browser/zen-browser-places.js                   (content/zen-browser-places.js)

src/browser/locales/en-US/browser/appmenu-ftl.patch

@@ -0,0 +1,21 @@
+diff --git a/browser/locales/en-US/browser/appmenu.ftl b/browser/locales/en-US/browser/appmenu.ftl
+index 5ad2d75f6215f7da44948cda5ad938db8fd97e8d..6a3e361bbed2fc36493011509366274c4dfc6874 100644
+--- a/browser/locales/en-US/browser/appmenu.ftl
++++ b/browser/locales/en-US/browser/appmenu.ftl
+@@ -25,6 +25,10 @@ appmenuitem-new-window =
+     .label = New window
+ appmenuitem-new-private-window =
+     .label = New private window
++appmenuitem-new-zen-profiles-tab =
++  .label = Open Profiles Page
++appmenuitem-new-zen-create-profile =
++  .label = Create a new profile
+ appmenuitem-history =
+   .label = History
+ appmenuitem-downloads =
+@@ -314,3 +318,5 @@ appmenuitem-relay-title = { -relay-brand-short-name }
+ appmenuitem-relay-description = Mask your real email and phone
+ appmenuitem-vpn-title = { -mozilla-vpn-brand-name }
+ appmenuitem-vpn-description = Protect your online activity
++
++zen-panel-ui-current-profile-text = Current Profile

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

@@ -1,6 +1,10 @@
 
 @import url("zen-panel-ui.css");
 
+:root {
+  --toolbarbutton-border-radius: 6px !important;
+}
+
 #navigator-toolbox toolbar#TabsToolbar {
   margin: 10px var(--zen-appcontent-separator-from-window);
 }

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

@@ -10,13 +10,14 @@
   background: var(--zen-main-browser-background);
   margin: 5px;
   box-shadow: var(--zen-sidebar-box-shadow) !important;
+  position: relative;
 }
 
 #PanelUI-zen-profiles-user-picture {
   background-image: var(--avatar-image-url);
-  transform: translateY(-50%);
   width: 80px;
   height: 80px;
+  min-width: 80px;
   border: 5px var(--arrowpanel-background) solid;
   background-color: var(--arrowpanel-background);
   border-radius: 50%;
@@ -24,5 +25,101 @@
   background-size: cover;
   background-position: center;
   margin: 0 auto;
-  
+  transform: translateY(55%);
+}
+
+.PanelUI-zen-profiles-item {
+  position: relative;
+  display: flex;
+  padding: 5px 10px;
+  border-radius: 5px;
+  margin: 5px;
+  font: menu;
+  align-items: center;
+}
+
+#PanelUI-zen-profiles-list .PanelUI-zen-profiles-item {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.PanelUI-zen-profiles-item:hover {
+  background: var(--panel-item-hover-bgcolor);
+  color: inherit;
+}
+
+.PanelUI-zen-profiles-item::after {
+  content: '';
+  background-image: url("chrome://global/skin/icons/arrow-right.svg");
+  background-size: 1em;
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 1em;
+  height: 1em;
+  margin-left: auto;
+  pointer-events: none;
+  top: 50%;
+  right: 1em;
+  transform: translateY(-50%);
+  position: absolute;
+}
+
+#PanelUI-zen-profiles-list .PanelUI-zen-profiles-item-avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  margin: 0 0.7em 0 1px;
+}
+
+#PanelUI-zen-profiles-list .PanelUI-zen-profiles-item-name {
+  font-weight: normal;
+  font-size: 17px;
+  margin-left: 5px;
+}
+
+#PanelUI-zen-profiles-current-info {
+  margin-top: 40px;
+}
+
+#PanelUI-zen-profiles-current-name {
+  font-size: 1.7em;
+  font-weight: 500;
+  line-height: 0.5;
+  padding: 5px 10px;
+  border-radius: 5px;
+  margin: 0 5px;
+}
+
+#PanelUI-zen-profiles toolbarseparator {
+  margin: 5px;
+}
+
+#PanelUI-zen-profiles toolbarbutton label {
+  display: block !important;
+}
+
+#PanelUI-zen-profiles menuitem {
+  padding: 8px 0;
+  font-size: 15px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+#PanelUI-zen-profiles menuitem > label {
+  margin: 0 10px;
+}
+
+#PanelUI-zen-profiles menuitem::after {
+  display: none;
+}
+
+#PanelUI-zen-profiles menuitem:last-child {
+  margin-bottom: 5px;
+}
+
+#PanelUI-zen-profiles-current-profile-current {
+  font-size: 15px;
+  opacity: 0.5;
+  margin-left: 15px;
+  margin-bottom: 5px;
 }

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

@@ -60,7 +60,8 @@
   border-radius: 10px;
 }
 
-.zen-sidebar-action-button:hover {
+.zen-sidebar-action-button:hover,
+.zen-sidebar-action-button[open="true"] {
   background: var(--toolbarbutton-hover-background);
 }
 
@@ -108,7 +109,7 @@
   align-items: center;
 }
 
-#zen-profile-button > div {
+#zen-profile-button > div:last-child {
   background-image: var(--avatar-image-url);
   border-radius: 50%;
   background-size: cover;
@@ -129,3 +130,13 @@
 #sidebar-box[hidden="true"] .zen-sidebar-action-button:nth-child(8) { animation-delay: 0.8s; }
 #sidebar-box[hidden="true"] .zen-sidebar-action-button:nth-child(9) { animation-delay: 0.9s; }
 #sidebar-box[hidden="true"] .zen-sidebar-action-button:nth-child(10) { animation-delay: 1s; }
+
+#sidebar-box[hidden="true"] .zen-side-bar-profiles-button-panel-correction {
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+}
+
+#zen-sidebar-icons-wrapper toolbarbutton {
+  position: relative;
+}

src/toolkit/profile/content/createProfileWizard-js.patch

@@ -1,23 +0,0 @@
-diff --git a/toolkit/profile/content/createProfileWizard.js b/toolkit/profile/content/createProfileWizard.js
-index 9e87fb42207d6d8e2cb054562bf50080fe9bb929..955f424bba004dd0fcd393500acbb66b4d5fce06 100644
---- a/toolkit/profile/content/createProfileWizard.js
-+++ b/toolkit/profile/content/createProfileWizard.js
-@@ -233,7 +233,7 @@ function onFinish(event) {
- 
-   // Create profile named profileName in profileRoot.
-   try {
--    profile = gProfileService.createProfile(gProfileRoot, profileName);
-+    profile = gProfileService.createProfile(gProfileRoot, profileName, zenGetProfileAvatar());
-   } catch (e) {
-     var profileCreationFailed = gProfileManagerBundle.getString(
-       "profileCreationFailed"
-@@ -264,3 +264,9 @@ function onFinish(event) {
-     dialogParams.objects.insertElementAt(profileLock, 0);
-   }
- }
-+
-+function zenGetProfileAvatar() {
-+  // From 0 to 99
-+  let avatarId = Math.floor(Math.random() * 100);
-+  return "chrome://browser/content/zen-avatars/avatar-" + avatarId + ".svg";
-+}

src/toolkit/profile/nsToolkitProfileService-cpp.patch

@@ -1,5 +1,5 @@
 diff --git a/toolkit/profile/nsToolkitProfileService.cpp b/toolkit/profile/nsToolkitProfileService.cpp
-index aeab25c61f3b04cfa19ec93e2abe0772d8656e61..aec22de2c7266970be19824d8bd2cae32e3b7af8 100644
+index aeab25c61f3b04cfa19ec93e2abe0772d8656e61..b2ddb042b2e114f37c283cd1fb401a388cbc61b9 100644
 --- a/toolkit/profile/nsToolkitProfileService.cpp
 +++ b/toolkit/profile/nsToolkitProfileService.cpp
 @@ -234,13 +234,14 @@ void RemoveProfileFiles(nsIToolkitProfile* aProfile, bool aInBackground) {
@@ -19,17 +19,22 @@ index aeab25c61f3b04cfa19ec93e2abe0772d8656e61..aec22de2c7266970be19824d8bd2cae3
    NS_ASSERTION(aRootDir, "No file!");
  
    RefPtr<nsToolkitProfile> prev =
-@@ -253,8 +254,8 @@ nsToolkitProfile::nsToolkitProfile(const nsACString& aName, nsIFile* aRootDir,
+@@ -253,8 +254,13 @@ nsToolkitProfile::nsToolkitProfile(const nsACString& aName, nsIFile* aRootDir,
    nsToolkitProfileService::gService->mProfiles.insertBack(this);
  
    // If this profile isn't in the database already add it.
 +  nsINIParser* db = &nsToolkitProfileService::gService->mProfileDB;
    if (!aFromDB) {
 -    nsINIParser* db = &nsToolkitProfileService::gService->mProfileDB;
++    if (mZenAvatarPath == ""_ns) {
++      auto randomId = std::rand() % 100;
++      mZenAvatarPath = ("chrome://browser/content/zen-avatars/avatar-" + std::to_string(randomId) + ".svg").c_str();
++    }
++
      db->SetString(mSection.get(), "Name", mName.get());
  
      bool isRelative = false;
-@@ -264,6 +265,7 @@ nsToolkitProfile::nsToolkitProfile(const nsACString& aName, nsIFile* aRootDir,
+@@ -264,6 +270,7 @@ nsToolkitProfile::nsToolkitProfile(const nsACString& aName, nsIFile* aRootDir,
  
      db->SetString(mSection.get(), "IsRelative", isRelative ? "1" : "0");
      db->SetString(mSection.get(), "Path", descriptor.get());
@@ -37,7 +42,7 @@ index aeab25c61f3b04cfa19ec93e2abe0772d8656e61..aec22de2c7266970be19824d8bd2cae3
    }
  }
  
-@@ -318,6 +320,8 @@ nsToolkitProfile::SetName(const nsACString& aName) {
+@@ -318,6 +325,8 @@ nsToolkitProfile::SetName(const nsACString& aName) {
    return NS_OK;
  }
  
@@ -46,7 +51,7 @@ index aeab25c61f3b04cfa19ec93e2abe0772d8656e61..aec22de2c7266970be19824d8bd2cae3
  nsresult nsToolkitProfile::RemoveInternal(bool aRemoveFiles,
                                            bool aInBackground) {
    NS_ASSERTION(nsToolkitProfileService::gService, "Whoa, my service is gone.");
-@@ -992,7 +996,15 @@ nsresult nsToolkitProfileService::Init() {
+@@ -992,7 +1001,15 @@ nsresult nsToolkitProfileService::Init() {
        localDir = rootDir;
      }
  
@@ -63,7 +68,7 @@ index aeab25c61f3b04cfa19ec93e2abe0772d8656e61..aec22de2c7266970be19824d8bd2cae3
  
      // If a user has modified the ini file path it may make for a valid profile
      // path but not match what we would have serialised and so may not match
-@@ -1995,7 +2007,7 @@ nsToolkitProfileService::CreateProfile(nsIFile* aRootDir,
+@@ -1995,7 +2012,7 @@ nsToolkitProfileService::CreateProfile(nsIFile* aRootDir,
    NS_ENSURE_SUCCESS(rv, rv);
  
    nsCOMPtr<nsIToolkitProfile> profile =