1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-07 23:00:01 +02:00

Finished profile panel UI

This commit is contained in:
mauro-balades 2024-04-02 21:09:35 +02:00
parent e6fcb2eac4
commit 320d56356d
15 changed files with 336 additions and 43 deletions

View file

@ -1 +1 @@
build
run

View file

@ -1 +1 @@
45
47

View file

@ -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>

View file

@ -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" />

View file

@ -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"

View file

@ -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);
}
}
};

View file

@ -1,6 +1,17 @@
<panelview id="PanelUI-zen-profiles" position="bottomleft topleft" side="right">
<vbox class="panel-subview-body">
<div id="PanelUI-zen-profiles-header"></div>
<div id="PanelUI-zen-profiles-user-picture" />
<vbox>
<html:div id="PanelUI-zen-profiles-header">
<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>

View file

@ -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>

View file

@ -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)

View file

@ -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

View file

@ -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);
}

View file

@ -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;
}

View file

@ -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;
}

View file

@ -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";
+}

View file

@ -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 =