diff --git a/locales/en-US/app.ftl b/locales/en-US/app.ftl index 3697baf81e..6aa0ddf66e 100644 --- a/locales/en-US/app.ftl +++ b/locales/en-US/app.ftl @@ -576,11 +576,11 @@ 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--download = + .label = Download… -MenuButtons--index--share-re-upload = - .label = Re-upload +MenuButtons--index--share = + .label = Share… MenuButtons--index--share-error-uploading = .label = Error uploading @@ -735,7 +735,9 @@ 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--download-performance-profile = Download Profile MenuButtons--publish--info-description = Upload your profile and make it accessible to anyone with the link. +MenuButtons--publish--download-info-description = Save this profile as a file on your computer. 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 diff --git a/src/components/app/MenuButtons/Publish.css b/src/components/app/MenuButtons/Publish.css index 60429e8b08..40957cd4e2 100644 --- a/src/components/app/MenuButtons/Publish.css +++ b/src/components/app/MenuButtons/Publish.css @@ -17,6 +17,11 @@ background-image: var(--internal-uploading-icon); } +.menuButtonsDownloadButton::before { + background-image: url(../../../../res/img/svg/download.svg); + background-size: auto 12px; +} + .menuButtonsShareButtonError { --internal-error-foreground-color: white; --internal-error-background-color: var(--red-60); @@ -58,6 +63,10 @@ --internal-uploading-icon: url(../../../../res/img/svg/sharing-animated-dark-12.svg); } + .menuButtonsDownloadButton::before { + background-image: url(../../../../res/img/svg/download-light.svg); + } + .menuButtonsShareButtonError { --internal-error-foreground-color: var(--grey-20); } @@ -154,6 +163,10 @@ background: var(--internal-download-icon) center center no-repeat; } +.publishPanelButtonsDownloadPrimary .publishPanelButtonsSvgDownload { + background-image: url(../../../../res/img/svg/download-light.svg); +} + .menuButtonsDownloadSize { display: inline-block; margin: 0 4px; diff --git a/src/components/app/MenuButtons/Publish.tsx b/src/components/app/MenuButtons/Publish.tsx index b464465a33..3fd235827b 100644 --- a/src/components/app/MenuButtons/Publish.tsx +++ b/src/components/app/MenuButtons/Publish.tsx @@ -50,6 +50,7 @@ import './Publish.css'; import { Localized } from '@fluent/react'; type OwnProps = { + readonly mode: 'download' | 'share'; readonly isRepublish?: boolean; }; @@ -127,30 +128,50 @@ class PublishPanelImpl extends React.PureComponent { downloadFileName, shouldSanitizeByDefault, isRepublish, + mode, } = this.props; + const isDownload = mode === 'download'; + + let title; + if (isDownload) { + title = ( + + Download Profile + + ); + } else if (isRepublish) { + title = ( + + Re-upload Performance Profile + + ); + } else { + title = ( + + Share Performance Profile + + ); + } + return (
-

- {isRepublish ? ( - - Re-upload Performance Profile +

{title}

+

+ {isDownload ? ( + + Save this profile as a file on your computer. ) : ( - - Share Performance Profile + + Upload your profile and make it accessible to anyone with the + link. - )} -

-

- - Upload your profile and make it accessible to anyone with the - link. - {' '} + )}{' '} {shouldSanitizeByDefault ? ( By default, your personal data is removed. @@ -222,20 +243,24 @@ class PublishPanelImpl extends React.PureComponent {

) : null}
- - + {isDownload ? ( + + ) : ( + + )}
@@ -383,6 +408,7 @@ export const PublishPanel = explicitConnect< type DownloadButtonProps = { readonly sanitizedProfileEncodingState: SanitizedProfileEncodingState; readonly downloadFileName: string; + readonly primary?: boolean; }; /** @@ -390,9 +416,12 @@ type DownloadButtonProps = { */ class DownloadButton extends React.PureComponent { override render() { - const { sanitizedProfileEncodingState, downloadFileName } = this.props; - const className = - 'photon-button publishPanelButton publishPanelButtonsDownload'; + const { sanitizedProfileEncodingState, downloadFileName, primary } = + this.props; + const className = classNames( + 'photon-button publishPanelButton publishPanelButtonsDownload', + { 'photon-button-primary publishPanelButtonsDownloadPrimary': primary } + ); switch (sanitizedProfileEncodingState.phase) { case 'DONE': { diff --git a/src/components/app/MenuButtons/index.tsx b/src/components/app/MenuButtons/index.tsx index 92c75be4e6..72f9410ef6 100644 --- a/src/components/app/MenuButtons/index.tsx +++ b/src/components/app/MenuButtons/index.tsx @@ -268,30 +268,43 @@ class MenuButtonsImpl extends React.PureComponent { const isRepublish = uploadedStatus === 'uploaded'; const isError = uploadPhase === 'error'; - let labelL10nId = 'MenuButtons--index--share-upload'; - if (isRepublish) { - labelL10nId = 'MenuButtons--index--share-re-upload'; - } - - if (isError) { - labelL10nId = 'MenuButtons--index--share-error-uploading'; - } - return ( - - + + } - )} - panelClassName="publishPanelPanel" - // The value for the label following will be replaced - label="" - panelContent={} - /> - + /> + + + + } + /> + + ); } diff --git a/src/test/components/MenuButtons.test.tsx b/src/test/components/MenuButtons.test.tsx index 64b7570e9f..f4126ec2cf 100644 --- a/src/test/components/MenuButtons.test.tsx +++ b/src/test/components/MenuButtons.test.tsx @@ -210,9 +210,9 @@ describe('app/MenuButtons', function () { const setupResult = setup(storeWithProfile(profile)); const getPublishButton = () => - screen.getByText(/^(Re-upload|Upload Local Profile)$/); + screen.getByText(/^(Share…|Error uploading)$/); const findPublishButton = () => - screen.findByText(/^(Re-upload|Upload Local Profile)$/); + screen.findByText(/^(Share…|Error uploading)$/); const getCancelButton = () => screen.getByText('Cancel Upload'); const getPanelForm = () => ensureExists( @@ -234,10 +234,16 @@ describe('app/MenuButtons', function () { name: /Include the data from other tabs/, }); const getPanel = () => screen.getByTestId('PublishPanel-container'); + // The Share button opens the panel with the Upload CTA and the submit form. const openPublishPanel = async () => { fireFullClick(getPublishButton()); await screen.findByText(/^(Share|Re-upload) Performance Profile$/); }; + // The Download button opens the same panel but with the Download CTA. + const openDownloadPanel = async () => { + fireFullClick(screen.getByText('Download…')); + await screen.findByText('Download Profile'); + }; return { ...setupResult, @@ -251,6 +257,7 @@ describe('app/MenuButtons', function () { getPrivateBrowsingCheckbox, getRemoveOtherTabsCheckbox, openPublishPanel, + openDownloadPanel, resolveUpload, rejectUpload, }; @@ -286,27 +293,27 @@ describe('app/MenuButtons', function () { it('matches the snapshot for the opened panel for a nightly profile', async () => { const { profile } = createSimpleProfile('nightly'); - const { getPanel, openPublishPanel } = setupForPublish(profile); - await openPublishPanel(); + const { getPanel, openDownloadPanel } = setupForPublish(profile); + await openDownloadPanel(); await screen.findByRole('link', { name: /Download/ }); expect(getPanel()).toMatchSnapshot(); }); it('matches the snapshot for the opened panel for a release profile', async () => { const { profile } = createSimpleProfile('release'); - const { getPanel, openPublishPanel } = setupForPublish(profile); - await openPublishPanel(); + const { getPanel, openDownloadPanel } = setupForPublish(profile); + await openDownloadPanel(); await screen.findByRole('link', { name: /Download/ }); expect(getPanel()).toMatchSnapshot(); }); it('matches the snapshot for the menu buttons and the opened panel for an already uploaded profile', async () => { const { profile } = createSimpleProfile(); - const { getPanel, container, navigateToHash, openPublishPanel } = + const { getPanel, container, navigateToHash, openDownloadPanel } = setupForPublish(profile); navigateToHash('VALID_HASH'); expect(container).toMatchSnapshot(); - await openPublishPanel(); + await openDownloadPanel(); await screen.findByRole('link', { name: /Download/ }); expect(getPanel()).toMatchSnapshot(); }); diff --git a/src/test/components/__snapshots__/MenuButtons.test.tsx.snap b/src/test/components/__snapshots__/MenuButtons.test.tsx.snap index 2135be3fd1..8052fac437 100644 --- a/src/test/components/__snapshots__/MenuButtons.test.tsx.snap +++ b/src/test/components/__snapshots__/MenuButtons.test.tsx.snap @@ -1806,6 +1806,17 @@ exports[`app/MenuButtons can publish and revert 1`] = ` Profile Info +
+ +
@@ -1814,7 +1825,7 @@ exports[`app/MenuButtons can publish and revert 1`] = ` class="buttonWithPanelButton menuButtonsButton menuButtonsShareButtonButton menuButtonsButton-hasIcon" type="button" > - Re-upload + Share…
matches the snapshot for a compression error
-
+
+ +
@@ -2025,7 +2040,7 @@ exports[`app/MenuButtons matches the snapshot for the closed state 1`] class="buttonWithPanelButton menuButtonsButton menuButtonsShareButtonButton menuButtonsButton-hasIcon" type="button" > - Upload Local Profile + Share…
matches the snapshot for the menu buttons and Profile Info
+
+ +
@@ -2062,7 +2088,7 @@ exports[`app/MenuButtons matches the snapshot for the menu buttons and class="buttonWithPanelButton menuButtonsButton menuButtonsShareButtonButton menuButtonsButton-hasIcon" type="button" > - Re-upload + Share…
matches the snapshot for the menu buttons and

- Re-upload Performance Profile + Download Profile

- Upload your profile and make it accessible to anyone with the link. + Save this profile as a file on your computer. By default, your personal data is removed.

@@ -2171,7 +2197,7 @@ exports[`app/MenuButtons matches the snapshot for the menu buttons and class="publishPanelButtons" > @@ -2188,15 +2214,6 @@ exports[`app/MenuButtons matches the snapshot for the menu buttons and ) -
@@ -2212,12 +2229,12 @@ exports[`app/MenuButtons matches the snapshot for the opened panel for

- Share Performance Profile + Download Profile

- Upload your profile and make it accessible to anyone with the link. + Save this profile as a file on your computer. This profile is from ⁨Firefox Nightly⁩, so by default most information is included.

@@ -2289,7 +2306,7 @@ exports[`app/MenuButtons matches the snapshot for the opened panel for class="publishPanelButtons" > @@ -2306,15 +2323,6 @@ exports[`app/MenuButtons matches the snapshot for the opened panel for ) - @@ -2330,12 +2338,12 @@ exports[`app/MenuButtons matches the snapshot for the opened panel for

- Share Performance Profile + Download Profile

- Upload your profile and make it accessible to anyone with the link. + Save this profile as a file on your computer. By default, your personal data is removed.

@@ -2402,7 +2410,7 @@ exports[`app/MenuButtons matches the snapshot for the opened panel for class="publishPanelButtons" > @@ -2419,15 +2427,6 @@ exports[`app/MenuButtons matches the snapshot for the opened panel for ) -