Skip to content

Improve discoverability of downloading a local profile #6216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
fatadel wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Improve discoverability of downloading a local profile #6216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 12 additions & 10 deletions locales/en-US/app.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -576,15 +576,12 @@ MenuButtons--index--metaInfo-button =

MenuButtons--index--full-view = Full View
MenuButtons--index--cancel-upload = Cancel Upload
MenuButtons--index--share-upload =
.label = Upload Local Profile

MenuButtons--index--share-re-upload =
.label = Re-upload

MenuButtons--index--share-error-uploading =
.label = Error uploading

MenuButtons--index--save-profile =
.label = Save This Profile…

MenuButtons--index--revert = Revert to Original Profile

MenuButtons--permalink--button =
Expand Down Expand Up @@ -733,20 +730,25 @@ MenuButtons--publish--renderCheckbox-label-preference = Include preference value
MenuButtons--publish--renderCheckbox-label-private-browsing = Include the data from private browsing windows
MenuButtons--publish--renderCheckbox-label-private-browsing-warning-image =
.title = This profile contains private browsing data
MenuButtons--publish--reupload-performance-profile = Re-upload Performance Profile
MenuButtons--publish--share-performance-profile = Share Performance Profile
MenuButtons--publish--info-description = Upload your profile and make it accessible to anyone with the link.
MenuButtons--publish--info-description-default = By default, your personal data is removed.
MenuButtons--publish--info-description-firefox-nightly2 = This profile is from { -firefox-nightly-brand-name }, so by default most information is included.
MenuButtons--publish--include-additional-data = Include additional data that may be identifiable
MenuButtons--publish--button-upload = Upload
MenuButtons--publish--upload-title = Uploading profile…
MenuButtons--publish--cancel-upload = Cancel Upload
MenuButtons--publish--message-something-went-wrong = Uh oh, something went wrong when uploading the profile.
MenuButtons--publish--message-try-again = Try again
MenuButtons--publish--download = Download
MenuButtons--publish--compressing = Compressing…
MenuButtons--publish--error-while-compressing = Error while compressing, try unchecking some checkboxes to reduce the profile size.
MenuButtons--publish--save-profile-title = Save This Profile
MenuButtons--publish--save-profile-description = Pick what to include, then choose a destination below.
# Refers to the two destinations offered in this panel: downloading the profile to a file and uploading it to share.
MenuButtons--publish--applies-to-both = applies to both

@flodolo flodolo Jul 24, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not a very friendly design for localization. Please don't use a badge for this type of information, it should be explained in the text.

MenuButtons--publish--destination-download-title = Download
MenuButtons--publish--destination-download-description = Saved to your computer
MenuButtons--publish--destination-upload-title = Upload
MenuButtons--publish--destination-reupload-title = Re-upload
MenuButtons--publish--destination-upload-description = Accessible to anyone with the link

## NetworkSettings
## This is used in the network chart.
Expand Down
6 changes: 6 additions & 0 deletions res/img/svg/save-light.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions res/img/svg/save.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
136 changes: 107 additions & 29 deletions src/components/app/MenuButtons/Publish.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,25 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* These two background images build on the generic styles defined in
* MenuButtons/index.css when using an icon. */
.menuButtonsShareButtonButton {
--internal-share-icon: url(../../../../res/img/svg/share-dark-12.svg);
/* The animated icon shown on the "Cancel Upload" button while an upload is in
* progress. It builds on the generic icon styles in MenuButtons/index.css. */
.menuButtonsUploadingButton {
--internal-uploading-icon: url(../../../../res/img/svg/sharing-animated-dark-12.svg);
}

.menuButtonsShareButtonButton::before {
background-image: var(--internal-share-icon);
.menuButtonsUploadingButton::before {
background-image: var(--internal-uploading-icon);
}

.menuButtonsShareButtonButton-uploading::before {
background-image: var(--internal-uploading-icon);
.menuButtonsSaveButtonButton {
--internal-save-icon: url(../../../../res/img/svg/save.svg);
}

.menuButtonsSaveButtonButton::before {
background-image: var(--internal-save-icon);
}

.menuButtonsShareButtonError {
.menuButtonsSaveButtonError {
--internal-error-foreground-color: white;
--internal-error-background-color: var(--red-60);
--internal-error-hover-background-color: var(--red-70);
Expand All @@ -28,22 +31,22 @@
color: var(--internal-error-foreground-color);
}

.menuButtonsShareButtonError:hover {
.menuButtonsSaveButtonError:hover {
background-color: var(--internal-error-hover-background-color);
}

.buttonWithPanel.open > .menuButtonsShareButtonError,
.menuButtonsShareButtonError:hover:active {
.buttonWithPanel.open > .menuButtonsSaveButtonError,
.menuButtonsSaveButtonError:hover:active {
background-color: var(--internal-error-active-background-color);
}

.menuButtonsShareButtonError::before {
.menuButtonsSaveButtonError::before {
background-image: var(--internal-error-icon);
}

.publishPanelPanel {
--width: 510px;
--internal-info-icon: url(../../../../res/img/svg/info.svg);
--internal-muted-foreground-color: var(--grey-50);
--internal-button-disabled-hover-background-color: var(--grey-90-a10);
--internal-upload-icon: url(../../../../res/img/svg/upload.svg);
--internal-download-icon: url(../../../../res/img/svg/download.svg);
Expand All @@ -53,17 +56,16 @@
}

:root.dark-mode {
.menuButtonsShareButtonButton {
--internal-share-icon: url(../../../../res/img/svg/share-light-12.svg);
--internal-uploading-icon: url(../../../../res/img/svg/sharing-animated-dark-12.svg);
.menuButtonsSaveButtonButton {
--internal-save-icon: url(../../../../res/img/svg/save-light.svg);
}

.menuButtonsShareButtonError {
.menuButtonsSaveButtonError {
--internal-error-foreground-color: var(--grey-20);
}

.publishPanelPanel {
--internal-info-icon: url(../../../../res/img/svg/info-light.svg);
--internal-muted-foreground-color: var(--grey-40);
--internal-button-disabled-hover-background-color: var(--grey-10-a10);
--internal-download-icon: url(../../../../res/img/svg/download-light.svg);
--internal-upload-percentage-foreground-color: var(--blue-60);
Expand All @@ -74,22 +76,14 @@

.publishPanelContent {
position: relative;

/* This aligns all content, except the big icon. */
padding-left: 70px;
}

.publishPanelTitle {
/* "60px" This is the value to put the background image at the right location.
* This background image is 44x44, so this puts it 16px left of the text. */
padding-left: 60px;
margin: 0 0 0 -60px;
background: var(--internal-info-icon) left center no-repeat;
line-height: 44px; /* This is the height of the background image */
margin: 0 0 10px;
line-height: normal;
}

.publishPanelInfoDescription {
flex: 1;
margin-bottom: 1em;
line-height: 1.5;
}
Expand Down Expand Up @@ -160,6 +154,90 @@
font-size: 11px;
}

.publishPanelDataChoicesHeader {
display: flex;
align-items: center;
gap: 8px;
}

.publishPanelAppliesToBoth {
display: inline-block;
padding: 1px 8px;
border-radius: 10px;
background: var(--clickable-background-color);
color: var(--clickable-foreground-color);
font-size: 11px;
font-weight: normal;
}

.saveDestCards {
display: flex;
margin-top: 18px;
gap: 12px;
}

.saveDest {
display: flex;
box-sizing: border-box;
flex: 1;
flex-direction: column;
align-items: center;
padding: 16px 12px;
border: 1.5px solid var(--base-border-color);
border-radius: 8px;
background: none;
color: inherit;
cursor: default;
font: inherit;
gap: 3px;
text-align: center;
text-decoration: none;
}

.saveDest:hover:not(.saveDestDisabled) {
border-color: var(--clickable-border-color);
box-shadow: 0 1px 4px var(--base-shadow-color);
}

.saveDestDisabled {
opacity: 0.6;
}

.saveDestIcon {
width: 26px;
height: 26px;
margin-bottom: 4px;
}

.saveDestIconDownload {
background: var(--internal-download-icon) center / 22px no-repeat;
}

.saveDestIconUpload {
background: url(../../../../res/img/svg/cloud-dark-12.svg) center / 24px
no-repeat;
}

:root.dark-mode .saveDestIconUpload {
background-image: url(../../../../res/img/svg/cloud-light-12.svg);
}

.saveDestTitle {
font-size: 14px;
font-weight: 600;
}

.saveDestSub {
color: var(--internal-muted-foreground-color);
font-size: 12px;
}

.saveDestMeta {
margin-top: 4px;
color: var(--internal-muted-foreground-color);
font-size: 11px;
}

.publishPanelUpload {
position: relative;
padding: 10px 0;
Expand Down
Loading
Loading