From 84807d53b5798c5281b1e06044293a8638d55e68 Mon Sep 17 00:00:00 2001
From: fatadel <afatkhutdinov@mozilla.com>
Date: Fri, 24 Jul 2026 10:49:18 +0200
Subject: [PATCH 1/2] Improve discoverability of downloading a local profile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Downloading a profile was only reachable from inside the single
"Upload Local Profile" menu, so users looking to save a profile to
disk had no way to discover it from the toolbar.

Replace that single menu with two buttons, "Download…" and "Share…",
each with its own icon. Both open the same options panel; only the
heading and the action button differ, so Download saves the profile to
a file and Share uploads it for a shareable link.

Closes #3620
---
 locales/en-US/app.ftl                         |  15 +-
 src/components/app/MenuButtons/Publish.css    |  35 +++-
 src/components/app/MenuButtons/Publish.tsx    | 110 +++++++---
 src/components/app/MenuButtons/index.tsx      |  75 ++++---
 src/test/components/MenuButtons.test.tsx      |  43 +++-
 .../__snapshots__/MenuButtons.test.tsx.snap   | 195 ++++++++++++++----
 6 files changed, 343 insertions(+), 130 deletions(-)

diff --git a/locales/en-US/app.ftl b/locales/en-US/app.ftl
index ec443ae5d0..91c30908bb 100644
--- a/locales/en-US/app.ftl
+++ b/locales/en-US/app.ftl
@@ -576,11 +576,14 @@ 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--reshare =
+    .label = Re-share…
 
 MenuButtons--index--share-error-uploading =
     .label = Error uploading
@@ -758,9 +761,11 @@ MenuButtons--publish--renderCheckbox-label-private-browsing-warning-image =
 MenuButtons--publish--renderCheckbox-label-argument-values = Include JavaScript execution tracing function argument values
 MenuButtons--publish--renderCheckbox-label-argument-values-warning-image =
     .title = This profile contains function argument values recorded from the page, which may include personal data
-MenuButtons--publish--reupload-performance-profile = Re-upload Performance Profile
 MenuButtons--publish--share-performance-profile = Share Performance Profile
+MenuButtons--publish--reshare-performance-profile = Re-share Performance Profile
+MenuButtons--publish--download-performance-profile = Download Performance 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 35048455a9..4d6d4ca9b1 100644
--- a/src/components/app/MenuButtons/Publish.css
+++ b/src/components/app/MenuButtons/Publish.css
@@ -17,6 +17,13 @@
   background-image: var(--internal-uploading-icon);
 }
 
+.menuButtonsDownloadButton::before {
+  background-image: url(../../../../res/img/svg/download.svg);
+
+  /* download.svg is 14x20, so size by height to fit the square icon slot. */
+  background-size: auto 12px;
+}
+
 .menuButtonsShareButtonError {
   --internal-error-foreground-color: white;
   --internal-error-background-color: var(--red-60);
@@ -58,6 +65,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);
   }
@@ -75,22 +86,22 @@
 .publishPanelContent {
   position: relative;
 
-  /* This aligns all content, except the big icon. */
-  padding-left: 70px;
+  /* Reserve space on the left for the title icon. */
+  padding-left: 34px;
 }
 
 .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;
+  padding-left: 28px;
+
+  /* Negative margin pulls the 18px icon back into the gutter, 10px before the text. */
+  margin: 0 0 6px -28px;
   background: var(--internal-info-icon) left center no-repeat;
-  line-height: 44px; /* This is the height of the background image */
+  background-size: 18px 18px;
+  line-height: 28px;
 }
 
 .publishPanelInfoDescription {
-  flex: 1;
-  margin-bottom: 1em;
+  margin: 0 0 12px;
   line-height: 1.5;
 }
 
@@ -111,7 +122,7 @@
 .publishPanelButtons {
   display: flex;
   justify-content: right;
-  margin-top: 20px;
+  margin-top: 16px;
 }
 
 .publishPanelButton {
@@ -155,6 +166,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 32a37d37af..38fd2275cc 100644
--- a/src/components/app/MenuButtons/Publish.tsx
+++ b/src/components/app/MenuButtons/Publish.tsx
@@ -51,6 +51,7 @@ import './Publish.css';
 import { Localized } from '@fluent/react';
 
 type OwnProps = {
+  readonly mode: 'download' | 'share';
   readonly isRepublish?: boolean;
 };
 
@@ -101,7 +102,9 @@ class PublishPanelImpl extends React.PureComponent<PublishProps, {}> {
     labelL10nId: string,
     additionalContent?: React.ReactNode
   ) {
-    const { checkedSharingOptions } = this.props;
+    const { checkedSharingOptions, uploadPhase } = this.props;
+    const isUploading =
+      uploadPhase === 'uploading' || uploadPhase === 'compressing';
     return (
       <label className="photon-label publishPanelDataChoicesLabel">
         <input
@@ -110,6 +113,7 @@ class PublishPanelImpl extends React.PureComponent<PublishProps, {}> {
           name={slug}
           onChange={this._onCheckboxChange}
           checked={checkedSharingOptions[slug]}
+          disabled={isUploading}
         />
         <span>
           <Localized id={labelL10nId} />
@@ -132,30 +136,50 @@ class PublishPanelImpl extends React.PureComponent<PublishProps, {}> {
       downloadFileName,
       shouldSanitizeByDefault,
       isRepublish,
+      mode,
     } = this.props;
 
+    const isDownload = mode === 'download';
+
+    let title;
+    if (isDownload) {
+      title = (
+        <Localized id="MenuButtons--publish--download-performance-profile">
+          Download Performance Profile
+        </Localized>
+      );
+    } else if (isRepublish) {
+      title = (
+        <Localized id="MenuButtons--publish--reshare-performance-profile">
+          Re-share Performance Profile
+        </Localized>
+      );
+    } else {
+      title = (
+        <Localized id="MenuButtons--publish--share-performance-profile">
+          Share Performance Profile
+        </Localized>
+      );
+    }
+
     return (
       <div data-testid="PublishPanel-container">
         <form
           className="publishPanelContent photon-body-10"
-          onSubmit={this._onSubmit}
+          onSubmit={isDownload ? undefined : this._onSubmit}
         >
-          <h1 className="publishPanelTitle photon-title-40">
-            {isRepublish ? (
-              <Localized id="MenuButtons--publish--reupload-performance-profile">
-                Re-upload Performance Profile
+          <h1 className="publishPanelTitle photon-title-30">{title}</h1>
+          <p className="publishPanelInfoDescription">
+            {isDownload ? (
+              <Localized id="MenuButtons--publish--download-info-description">
+                Save this profile as a file on your computer.
               </Localized>
             ) : (
-              <Localized id="MenuButtons--publish--share-performance-profile">
-                Share Performance Profile
+              <Localized id="MenuButtons--publish--info-description">
+                Upload your profile and make it accessible to anyone with the
+                link.
               </Localized>
-            )}
-          </h1>
-          <p className="publishPanelInfoDescription">
-            <Localized id="MenuButtons--publish--info-description">
-              Upload your profile and make it accessible to anyone with the
-              link.
-            </Localized>{' '}
+            )}{' '}
             {shouldSanitizeByDefault ? (
               <Localized id="MenuButtons--publish--info-description-default">
                 By default, your personal data is removed.
@@ -243,20 +267,33 @@ class PublishPanelImpl extends React.PureComponent<PublishProps, {}> {
             </div>
           ) : null}
           <div className="publishPanelButtons">
-            <DownloadButton
-              downloadFileName={downloadFileName}
-              sanitizedProfileEncodingState={sanitizedProfileEncodingState}
-            />
-            <button
-              type="submit"
-              className="photon-button photon-button-primary publishPanelButton publishPanelButtonsUpload"
-              disabled={sanitizedProfileEncodingState.phase === 'ERROR'}
-            >
-              <span className="publishPanelButtonsSvg publishPanelButtonsSvgUpload" />
-              <Localized id="MenuButtons--publish--button-upload">
-                Upload
-              </Localized>
-            </button>
+            {isDownload ? (
+              <DownloadButton
+                primary
+                downloadFileName={downloadFileName}
+                sanitizedProfileEncodingState={sanitizedProfileEncodingState}
+              />
+            ) : (
+              <button
+                type="submit"
+                className="photon-button photon-button-primary publishPanelButton publishPanelButtonsUpload"
+                disabled={sanitizedProfileEncodingState.phase === 'ERROR'}
+              >
+                <span className="publishPanelButtonsSvg publishPanelButtonsSvgUpload" />
+                <Localized id="MenuButtons--publish--button-upload">
+                  Upload
+                </Localized>{' '}
+                {sanitizedProfileEncodingState.phase === 'DONE' ? (
+                  <span className="menuButtonsDownloadSize">
+                    (
+                    {prettyBytes(
+                      sanitizedProfileEncodingState.profileData.size
+                    )}
+                    )
+                  </span>
+                ) : null}
+              </button>
+            )}
           </div>
         </form>
       </div>
@@ -355,7 +392,10 @@ class PublishPanelImpl extends React.PureComponent<PublishProps, {}> {
   }
 
   override render() {
-    const { uploadPhase } = this.props;
+    const { uploadPhase, mode } = this.props;
+    if (mode === 'download') {
+      return this._renderPublishPanel();
+    }
     switch (uploadPhase) {
       case 'error':
         return this._renderErrorPanel();
@@ -405,6 +445,7 @@ export const PublishPanel = explicitConnect<
 type DownloadButtonProps = {
   readonly sanitizedProfileEncodingState: SanitizedProfileEncodingState;
   readonly downloadFileName: string;
+  readonly primary?: boolean;
 };
 
 /**
@@ -412,9 +453,12 @@ type DownloadButtonProps = {
  */
 class DownloadButton extends React.PureComponent<DownloadButtonProps, {}> {
   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..72f1a9d18c 100644
--- a/src/components/app/MenuButtons/index.tsx
+++ b/src/components/app/MenuButtons/index.tsx
@@ -249,49 +249,58 @@ class MenuButtonsImpl extends React.PureComponent<Props, State> {
 
     const isUploading =
       uploadPhase === 'uploading' || uploadPhase === 'compressing';
-
-    if (isUploading) {
-      return (
-        <button
-          type="button"
-          className="menuButtonsButton menuButtonsShareButtonButton menuButtonsButton-hasIcon menuButtonsShareButtonButton-uploading"
-          onClick={abortFunction}
-        >
-          <Localized id="MenuButtons--index--cancel-upload">
-            Cancel Upload
-          </Localized>
-        </button>
-      );
-    }
-
     const uploadedStatus = this._getUploadedStatus(dataSource, profileUrl);
     const isRepublish = uploadedStatus === 'uploaded';
     const isError = uploadPhase === 'error';
 
-    let labelL10nId = 'MenuButtons--index--share-upload';
+    let shareLabelId = 'MenuButtons--index--share';
     if (isRepublish) {
-      labelL10nId = 'MenuButtons--index--share-re-upload';
+      shareLabelId = 'MenuButtons--index--reshare';
     }
-
     if (isError) {
-      labelL10nId = 'MenuButtons--index--share-error-uploading';
+      shareLabelId = 'MenuButtons--index--share-error-uploading';
     }
 
     return (
-      <Localized id={labelL10nId} attrs={{ label: true }}>
-        <ButtonWithPanel
-          buttonClassName={classNames(
-            'menuButtonsButton menuButtonsShareButtonButton menuButtonsButton-hasIcon',
-            {
-              menuButtonsShareButtonError: isError,
-            }
-          )}
-          panelClassName="publishPanelPanel"
-          // The value for the label following will be replaced
-          label=""
-          panelContent={<PublishPanel isRepublish={isRepublish} />}
-        />
-      </Localized>
+      <>
+        <Localized id="MenuButtons--index--download" attrs={{ label: true }}>
+          <ButtonWithPanel
+            buttonClassName="menuButtonsButton menuButtonsDownloadButton menuButtonsButton-hasIcon"
+            panelClassName="publishPanelPanel"
+            // The value for the label following will be replaced
+            label=""
+            panelContent={<PublishPanel mode="download" />}
+          />
+        </Localized>
+        {isUploading ? (
+          <button
+            type="button"
+            className="menuButtonsButton menuButtonsShareButtonButton menuButtonsButton-hasIcon menuButtonsShareButtonButton-uploading"
+            onClick={abortFunction}
+          >
+            <Localized id="MenuButtons--index--cancel-upload">
+              Cancel Upload
+            </Localized>
+          </button>
+        ) : (
+          <Localized id={shareLabelId} attrs={{ label: true }}>
+            <ButtonWithPanel
+              buttonClassName={classNames(
+                'menuButtonsButton menuButtonsShareButtonButton menuButtonsButton-hasIcon',
+                {
+                  menuButtonsShareButtonError: isError,
+                }
+              )}
+              panelClassName="publishPanelPanel"
+              // The value for the label following will be replaced
+              label=""
+              panelContent={
+                <PublishPanel mode="share" isRepublish={isRepublish} />
+              }
+            />
+          </Localized>
+        )}
+      </>
     );
   }
 
diff --git a/src/test/components/MenuButtons.test.tsx b/src/test/components/MenuButtons.test.tsx
index 9f1473e823..44c649483a 100644
--- a/src/test/components/MenuButtons.test.tsx
+++ b/src/test/components/MenuButtons.test.tsx
@@ -230,9 +230,9 @@ describe('app/MenuButtons', function () {
       const setupResult = setup(storeWithProfile(profile));
 
       const getPublishButton = () =>
-        screen.getByText(/^(Re-upload|Upload Local Profile)$/);
+        screen.getByText(/^(Share…|Re-share…|Error uploading)$/);
       const findPublishButton = () =>
-        screen.findByText(/^(Re-upload|Upload Local Profile)$/);
+        screen.findByText(/^(Share…|Re-share…|Error uploading)$/);
       const getCancelButton = () => screen.getByText('Cancel Upload');
       const getPanelForm = () =>
         ensureExists(
@@ -258,9 +258,15 @@ describe('app/MenuButtons', function () {
           name: /Include JavaScript execution tracing function argument values/,
         });
       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$/);
+        await screen.findByText(/^(Share|Re-share) 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 Performance Profile');
       };
 
       return {
@@ -276,6 +282,7 @@ describe('app/MenuButtons', function () {
         getRemoveOtherTabsCheckbox,
         queryArgumentValuesCheckbox,
         openPublishPanel,
+        openDownloadPanel,
         resolveUpload,
         rejectUpload,
       };
@@ -311,27 +318,34 @@ 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, openDownloadPanel } = setupForPublish(profile);
+      await openDownloadPanel();
+      await screen.findByRole('link', { name: /Download/ });
+      expect(getPanel()).toMatchSnapshot();
+    });
+
+    it('matches the snapshot for the opened share panel', async () => {
       const { profile } = createSimpleProfile('release');
       const { getPanel, openPublishPanel } = setupForPublish(profile);
       await openPublishPanel();
-      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();
     });
@@ -504,6 +518,19 @@ describe('app/MenuButtons', function () {
       );
       expect(getPanel()).toMatchSnapshot();
     });
+
+    it('keeps Download available but locks the options while uploading', async () => {
+      const { openPublishPanel, getPanelForm, openDownloadPanel } =
+        setupForPublish();
+      await openPublishPanel();
+      fireEvent.submit(getPanelForm());
+
+      // The Download button stays in the toolbar while the upload is running.
+      await openDownloadPanel();
+      expect(
+        screen.getByRole('checkbox', { name: /Include hidden threads/ })
+      ).toBeDisabled();
+    });
   });
 
   describe('<MetaInfoPanel>', function () {
diff --git a/src/test/components/__snapshots__/MenuButtons.test.tsx.snap b/src/test/components/__snapshots__/MenuButtons.test.tsx.snap
index af3c5a3727..cfddb3ad72 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 <Publish> can publish and revert 1`] = `
         Profile Info
       </button>
     </div>
+    <div
+      class="buttonWithPanel"
+    >
+      <button
+        aria-expanded="false"
+        class="buttonWithPanelButton menuButtonsButton menuButtonsDownloadButton menuButtonsButton-hasIcon"
+        type="button"
+      >
+        Download…
+      </button>
+    </div>
     <div
       class="buttonWithPanel"
     >
@@ -1814,7 +1825,7 @@ exports[`app/MenuButtons <Publish> can publish and revert 1`] = `
         class="buttonWithPanelButton menuButtonsButton menuButtonsShareButtonButton menuButtonsButton-hasIcon"
         type="button"
       >
-        Re-upload
+        Re-share…
       </button>
     </div>
     <div
@@ -1872,7 +1883,7 @@ exports[`app/MenuButtons <Publish> matches the snapshot for a compression error
     class="publishPanelContent photon-body-10"
   >
     <h1
-      class="publishPanelTitle photon-title-40"
+      class="publishPanelTitle photon-title-30"
     >
       Share Performance Profile
     </h1>
@@ -1964,13 +1975,6 @@ exports[`app/MenuButtons <Publish> matches the snapshot for a compression error
     <div
       class="publishPanelButtons"
     >
-      <button
-        class="photon-button publishPanelButton publishPanelButtonsDownload"
-        disabled=""
-        type="button"
-      >
-        Download
-      </button>
       <button
         class="photon-button photon-button-primary publishPanelButton publishPanelButtonsUpload"
         disabled=""
@@ -1980,6 +1984,7 @@ exports[`app/MenuButtons <Publish> matches the snapshot for a compression error
           class="publishPanelButtonsSvg publishPanelButtonsSvgUpload"
         />
         Upload
+         
       </button>
     </div>
   </form>
@@ -2027,6 +2032,17 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the closed state 1`]
       Profile Info
     </button>
   </div>
+  <div
+    class="buttonWithPanel"
+  >
+    <button
+      aria-expanded="false"
+      class="buttonWithPanelButton menuButtonsButton menuButtonsDownloadButton menuButtonsButton-hasIcon"
+      type="button"
+    >
+      Download…
+    </button>
+  </div>
   <div
     class="buttonWithPanel"
   >
@@ -2035,7 +2051,7 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the closed state 1`]
       class="buttonWithPanelButton menuButtonsButton menuButtonsShareButtonButton menuButtonsButton-hasIcon"
       type="button"
     >
-      Upload Local Profile
+      Share…
     </button>
   </div>
   <div
@@ -2064,6 +2080,17 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the menu buttons and
       Profile Info
     </button>
   </div>
+  <div
+    class="buttonWithPanel"
+  >
+    <button
+      aria-expanded="false"
+      class="buttonWithPanelButton menuButtonsButton menuButtonsDownloadButton menuButtonsButton-hasIcon"
+      type="button"
+    >
+      Download…
+    </button>
+  </div>
   <div
     class="buttonWithPanel"
   >
@@ -2072,7 +2099,7 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the menu buttons and
       class="buttonWithPanelButton menuButtonsButton menuButtonsShareButtonButton menuButtonsButton-hasIcon"
       type="button"
     >
-      Re-upload
+      Re-share…
     </button>
   </div>
   <div
@@ -2107,14 +2134,14 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the menu buttons and
     class="publishPanelContent photon-body-10"
   >
     <h1
-      class="publishPanelTitle photon-title-40"
+      class="publishPanelTitle photon-title-30"
     >
-      Re-upload Performance Profile
+      Download Performance Profile
     </h1>
     <p
       class="publishPanelInfoDescription"
     >
-      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.
     </p>
@@ -2191,7 +2218,7 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the menu buttons and
       class="publishPanelButtons"
     >
       <a
-        class="photon-button publishPanelButton publishPanelButtonsDownload"
+        class="photon-button publishPanelButton publishPanelButtonsDownload photon-button-primary publishPanelButtonsDownloadPrimary"
         download="Firefox 1970-01-01 00.00 profile.json.gz"
         href="mockCreateObjectUrl"
       >
@@ -2208,15 +2235,6 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the menu buttons and
           )
         </span>
       </a>
-      <button
-        class="photon-button photon-button-primary publishPanelButton publishPanelButtonsUpload"
-        type="submit"
-      >
-        <span
-          class="publishPanelButtonsSvg publishPanelButtonsSvgUpload"
-        />
-        Upload
-      </button>
     </div>
   </form>
 </div>
@@ -2230,14 +2248,14 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the opened panel for
     class="publishPanelContent photon-body-10"
   >
     <h1
-      class="publishPanelTitle photon-title-40"
+      class="publishPanelTitle photon-title-30"
     >
-      Share Performance Profile
+      Download Performance Profile
     </h1>
     <p
       class="publishPanelInfoDescription"
     >
-      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.
     </p>
@@ -2319,7 +2337,7 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the opened panel for
       class="publishPanelButtons"
     >
       <a
-        class="photon-button publishPanelButton publishPanelButtonsDownload"
+        class="photon-button publishPanelButton publishPanelButtonsDownload photon-button-primary publishPanelButtonsDownloadPrimary"
         download="Firefox 1970-01-01 00.00 profile.json.gz"
         href="mockCreateObjectUrl"
       >
@@ -2336,15 +2354,6 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the opened panel for
           )
         </span>
       </a>
-      <button
-        class="photon-button photon-button-primary publishPanelButton publishPanelButtonsUpload"
-        type="submit"
-      >
-        <span
-          class="publishPanelButtonsSvg publishPanelButtonsSvgUpload"
-        />
-        Upload
-      </button>
     </div>
   </form>
 </div>
@@ -2358,14 +2367,14 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the opened panel for
     class="publishPanelContent photon-body-10"
   >
     <h1
-      class="publishPanelTitle photon-title-40"
+      class="publishPanelTitle photon-title-30"
     >
-      Share Performance Profile
+      Download Performance Profile
     </h1>
     <p
       class="publishPanelInfoDescription"
     >
-      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.
     </p>
@@ -2442,7 +2451,7 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the opened panel for
       class="publishPanelButtons"
     >
       <a
-        class="photon-button publishPanelButton publishPanelButtonsDownload"
+        class="photon-button publishPanelButton publishPanelButtonsDownload photon-button-primary publishPanelButtonsDownloadPrimary"
         download="Firefox 1970-01-01 00.00 profile.json.gz"
         href="mockCreateObjectUrl"
       >
@@ -2459,6 +2468,102 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the opened panel for
           )
         </span>
       </a>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`app/MenuButtons <Publish> matches the snapshot for the opened share panel 1`] = `
+<div
+  data-testid="PublishPanel-container"
+>
+  <form
+    class="publishPanelContent photon-body-10"
+  >
+    <h1
+      class="publishPanelTitle photon-title-30"
+    >
+      Share Performance Profile
+    </h1>
+    <p
+      class="publishPanelInfoDescription"
+    >
+      Upload your profile and make it accessible to anyone with the link.
+       
+      By default, your personal data is removed.
+    </p>
+    <h3
+      class="photon-title-10"
+    >
+      Include additional data that may be identifiable
+    </h3>
+    <div
+      class="publishPanelDataChoices"
+    >
+      <label
+        class="photon-label publishPanelDataChoicesLabel"
+      >
+        <input
+          class="photon-checkbox photon-checkbox-default"
+          name="includeHiddenThreads"
+          type="checkbox"
+        />
+        <span>
+          Include hidden threads
+        </span>
+      </label>
+      <label
+        class="photon-label publishPanelDataChoicesLabel"
+      >
+        <input
+          class="photon-checkbox photon-checkbox-default"
+          name="includeFullTimeRange"
+          type="checkbox"
+        />
+        <span>
+          Include hidden time range
+        </span>
+      </label>
+      <label
+        class="photon-label publishPanelDataChoicesLabel"
+      >
+        <input
+          class="photon-checkbox photon-checkbox-default"
+          name="includeScreenshots"
+          type="checkbox"
+        />
+        <span>
+          Include screenshots
+        </span>
+      </label>
+      <label
+        class="photon-label publishPanelDataChoicesLabel"
+      >
+        <input
+          class="photon-checkbox photon-checkbox-default"
+          name="includeUrls"
+          type="checkbox"
+        />
+        <span>
+          Include resource URLs and paths
+        </span>
+      </label>
+      <label
+        class="photon-label publishPanelDataChoicesLabel"
+      >
+        <input
+          class="photon-checkbox photon-checkbox-default"
+          name="includeExtension"
+          type="checkbox"
+        />
+        <span>
+          Include extension information
+        </span>
+      </label>
+    </div>
+    <div
+      class="publishPanelButtons"
+    >
       <button
         class="photon-button photon-button-primary publishPanelButton publishPanelButtonsUpload"
         type="submit"
@@ -2467,6 +2572,14 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the opened panel for
           class="publishPanelButtonsSvg publishPanelButtonsSvgUpload"
         />
         Upload
+         
+        <span
+          class="menuButtonsDownloadSize"
+        >
+          (
+          1.58 kB
+          )
+        </span>
       </button>
     </div>
   </form>

From 13c016431ad7c647edb20fa9e2bcba5d4a3375c8 Mon Sep 17 00:00:00 2001
From: fatadel <afatkhutdinov@mozilla.com>
Date: Tue, 4 Aug 2026 11:23:40 +0200
Subject: [PATCH 2/2] Keep the download and upload panels' options independent

The two panels shared a single set of include/exclude checkboxes, so
changing an option for one silently changed it for the other. Store the
options per panel instead, defaulting both to the same values.

The in-flight profile encoding now lives in the store too, so opening
both panels (or pressing upload) reuses one compression instead of
starting a second one for the same profile.
---
 src/actions/publish.ts                     | 91 +++++++++++----------
 src/components/app/MenuButtons/Publish.tsx | 24 +++---
 src/components/app/MenuButtons/index.tsx   |  2 +-
 src/reducers/publish.ts                    | 28 +++++--
 src/selectors/publish.ts                   | 45 +++++++++--
 src/test/store/publish.test.ts             | 93 +++++++++++++++-------
 src/types/actions.ts                       |  5 ++
 src/types/state.ts                         | 13 ++-
 8 files changed, 200 insertions(+), 101 deletions(-)

diff --git a/src/actions/publish.ts b/src/actions/publish.ts
index 5b427b929f..f4b3869bd2 100644
--- a/src/actions/publish.ts
+++ b/src/actions/publish.ts
@@ -58,27 +58,33 @@ import type {
   Pid,
   TrackIndex,
   ProfileIndexTranslationMaps,
+  ProfileEncodingResult,
+  SharingMode,
 } from 'firefox-profiler/types';
 import { compress } from 'firefox-profiler/utils/gz';
 import { serializeProfileToJsonString } from 'firefox-profiler/profile-logic/process-profile';
 
 export function updateSharingOption(
+  mode: SharingMode,
   slug: keyof CheckedSharingOptions,
   value: boolean
 ): Action {
   return {
     type: 'UPDATE_SHARING_OPTION',
+    mode,
     slug,
     value,
   };
 }
 
 export function sanitizedProfileEncodingStarted(
-  sanitizedProfile: Profile
+  sanitizedProfile: Profile,
+  encodingPromise: Promise<ProfileEncodingResult>
 ): Action {
   return {
     type: 'SANITIZED_PROFILE_ENCODING_STARTED',
     sanitizedProfile,
+    encodingPromise,
   };
 }
 
@@ -176,8 +182,10 @@ async function persistJustUploadedProfileInformationToDb(
   const urlPredictor = getUrlPredictor(prepublishedState);
   let predictedUrl;
 
-  const removeProfileInformation =
-    getRemoveProfileInformation(prepublishedState);
+  const removeProfileInformation = getRemoveProfileInformation(
+    prepublishedState,
+    'upload'
+  );
   if (removeProfileInformation) {
     // In case you wonder, committedRanges is either an empty array (if the
     // range was sanitized) or `null` (otherwise).
@@ -253,13 +261,6 @@ async function persistJustUploadedProfileInformationToDb(
   }
 }
 
-export type ProfileEncodingResult =
-  | {
-      type: 'SUCCESS';
-      profileData: Blob;
-    }
-  | { type: 'ERROR'; error: Error };
-
 function unwrapEncodedProfile(encodingResult: ProfileEncodingResult): Blob {
   if (encodingResult.type === 'ERROR') {
     throw encodingResult.error;
@@ -278,31 +279,33 @@ export type InflightProfileEncoding = {
  * - Serialize the profile to a buffer
  * - Kick off the asynchronous compression of the buffer
  *
- * The asynchronous compression can take a few seconds, so we want to kick
- * it off immediately when the profile publishing panel is opened. We also
- * want to be able to make use of the current in-flight compression if the
- * user clicks the upload button before compression is done. This is why
- * we return an `InflightProfileEncoding` object from this action; it contains
- * a promise which lets other parts of the publishing pipeline wait on the
- * compressed results.
+ * The asynchronous compression can take a few seconds, so we kick it off
+ * immediately when the download or share panel is opened. The in-flight
+ * compression is tracked in the redux state, so opening the other panel or
+ * pressing Upload reuses it (for the same sanitized profile) instead of
+ * compressing again. The returned promise lets the caller wait on the
+ * compressed result.
  *
  * This thunk action is synchronous.
  */
 export function encodeSanitizedProfile(
-  previousInflightEncoding?: InflightProfileEncoding
+  mode: SharingMode
 ): ThunkAction<InflightProfileEncoding> {
   return (dispatch, getState): InflightProfileEncoding => {
     const state = getState();
-    const sanitizedProfile = getSanitizedProfile(state).profile;
-
-    if (previousInflightEncoding?.sanitizedProfile === sanitizedProfile) {
-      // No need to kick of another compression. The current encoding may still
-      // be in-flight, and returning the original promise allows the caller to
-      // await it.
-      return previousInflightEncoding;
-    }
+    const sanitizedProfile = getSanitizedProfile(state, mode).profile;
 
     const encodingState = getSanitizedProfileEncodingState(state);
+    if (
+      encodingState.phase === 'ENCODING' &&
+      encodingState.sanitizedProfile === sanitizedProfile
+    ) {
+      // A compression for this profile is already in-flight; reuse it.
+      return {
+        sanitizedProfile,
+        encodingPromise: encodingState.encodingPromise,
+      };
+    }
     if (
       encodingState.phase === 'DONE' &&
       encodingState.sanitizedProfile === sanitizedProfile
@@ -320,8 +323,10 @@ export function encodeSanitizedProfile(
     // Kick off a new encoding for this profile. Don't await the promise,
     // just return it as part of the InflightProfileEncoding.
     const encodingPromise: Promise<ProfileEncodingResult> = (async function () {
+      // Yield so the ENCODING phase (dispatched below) is in the store before a
+      // synchronous failure here could dispatch FAILED, which the reducer drops.
+      await Promise.resolve();
       try {
-        dispatch(sanitizedProfileEncodingStarted(sanitizedProfile));
         const gzipData = await compress(
           serializeProfileToJsonString(sanitizedProfile)
         );
@@ -335,25 +340,24 @@ export function encodeSanitizedProfile(
       }
     })();
 
+    dispatch(
+      sanitizedProfileEncodingStarted(sanitizedProfile, encodingPromise)
+    );
     return { sanitizedProfile, encodingPromise };
   };
 }
 
 /**
- * This function starts the profile sharing process. Takes an optional argument that
- * indicates if the share attempt is being made for the second time. We have two share
- * buttons, one for sharing for the first time, and one for sharing after the initial
- * share depending on the previous URL share status. People can decide to remove the
- * URLs from the profile after sharing with URLs or they can decide to add the URLs after
- * sharing without them. We check the current state before attempting to share depending
- * on that flag.
+ * This function starts the profile sharing process.
+ *
+ * There are two share buttons: one for the first upload, and one to re-share
+ * afterwards, which lets people add or remove the profile's URLs between
+ * attempts.
  *
  * The return value is used for tests to determine if the request went all the way
  * through (true) or was quit early due to the generation value being invalidated (false).
  */
-export function attemptToPublish(
-  previousInflightEncoding?: InflightProfileEncoding
-): ThunkAction<Promise<boolean>> {
+export function attemptToPublish(): ThunkAction<Promise<boolean>> {
   return async (dispatch, getState) => {
     try {
       sendAnalytics({
@@ -386,10 +390,11 @@ export function attemptToPublish(
       };
       dispatch(uploadCompressionStarted(abortfunction));
 
-      const sanitizedInformation = getSanitizedProfile(prePublishedState);
-      const profileEncoding = dispatch(
-        encodeSanitizedProfile(previousInflightEncoding)
+      const sanitizedInformation = getSanitizedProfile(
+        prePublishedState,
+        'upload'
       );
+      const profileEncoding = dispatch(encodeSanitizedProfile('upload'));
       const encodingResult = await profileEncoding.encodingPromise;
 
       // The previous line was async, check to make sure that this request is still valid.
@@ -431,8 +436,10 @@ export function attemptToPublish(
         return false;
       }
 
-      const removeProfileInformation =
-        getRemoveProfileInformation(prePublishedState);
+      const removeProfileInformation = getRemoveProfileInformation(
+        prePublishedState,
+        'upload'
+      );
       if (removeProfileInformation) {
         const { committedRanges, translationMaps, profile } =
           sanitizedInformation;
diff --git a/src/components/app/MenuButtons/Publish.tsx b/src/components/app/MenuButtons/Publish.tsx
index 38fd2275cc..413b8c49f6 100644
--- a/src/components/app/MenuButtons/Publish.tsx
+++ b/src/components/app/MenuButtons/Publish.tsx
@@ -4,7 +4,6 @@
 
 import * as React from 'react';
 import classNames from 'classnames';
-import type { InflightProfileEncoding } from 'firefox-profiler/actions/publish';
 import {
   updateSharingOption,
   attemptToPublish,
@@ -42,6 +41,7 @@ import WarningImage from 'firefox-profiler-res/img/svg/warning.svg';
 import type {
   Profile,
   CheckedSharingOptions,
+  SharingMode,
   StartEndRange,
   UploadPhase,
   SanitizedProfileEncodingState,
@@ -51,7 +51,7 @@ import './Publish.css';
 import { Localized } from '@fluent/react';
 
 type OwnProps = {
-  readonly mode: 'download' | 'share';
+  readonly mode: SharingMode;
   readonly isRepublish?: boolean;
 };
 
@@ -82,19 +82,19 @@ type DispatchProps = {
 type PublishProps = ConnectedProps<OwnProps, StateProps, DispatchProps>;
 
 class PublishPanelImpl extends React.PureComponent<PublishProps, {}> {
-  _inflightEncoding: InflightProfileEncoding | undefined;
-
   override componentDidMount(): void {
-    this._inflightEncoding = this.props.encodeSanitizedProfile();
+    this.props.encodeSanitizedProfile(this.props.mode);
   }
 
   _onCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const sharingOption = e.target.name as keyof CheckedSharingOptions;
-    this.props.updateSharingOption(sharingOption, e.target.checked);
-
-    this._inflightEncoding = this.props.encodeSanitizedProfile(
-      this._inflightEncoding
+    this.props.updateSharingOption(
+      this.props.mode,
+      sharingOption,
+      e.target.checked
     );
+
+    this.props.encodeSanitizedProfile(this.props.mode);
   };
 
   _renderCheckbox(
@@ -124,7 +124,7 @@ class PublishPanelImpl extends React.PureComponent<PublishProps, {}> {
   }
 
   _onSubmit = () => {
-    this.props.attemptToPublish(this._inflightEncoding);
+    this.props.attemptToPublish();
   };
 
   _renderPublishPanel() {
@@ -416,14 +416,14 @@ export const PublishPanel = explicitConnect<
   StateProps,
   DispatchProps
 >({
-  mapStateToProps: (state) => ({
+  mapStateToProps: (state, ownProps) => ({
     profile: getProfile(state),
     rootRange: getProfileRootRange(state),
     shouldShowPreferenceOption: getHasPreferenceMarkers(state),
     profileContainsPrivateBrowsingInformation:
       getContainsPrivateBrowsingInformation(state),
     profileHasJSTracingArgumentValues: getHasJSTracingArgumentValues(state),
-    checkedSharingOptions: getCheckedSharingOptions(state),
+    checkedSharingOptions: getCheckedSharingOptions(state, ownProps.mode),
     downloadFileName: getFilenameString(state),
     sanitizedProfileEncodingState: getSanitizedProfileEncodingState(state),
     uploadPhase: getUploadPhase(state),
diff --git a/src/components/app/MenuButtons/index.tsx b/src/components/app/MenuButtons/index.tsx
index 72f1a9d18c..8ac1b39a4a 100644
--- a/src/components/app/MenuButtons/index.tsx
+++ b/src/components/app/MenuButtons/index.tsx
@@ -295,7 +295,7 @@ class MenuButtonsImpl extends React.PureComponent<Props, State> {
               // The value for the label following will be replaced
               label=""
               panelContent={
-                <PublishPanel mode="share" isRepublish={isRepublish} />
+                <PublishPanel mode="upload" isRepublish={isRepublish} />
               }
             />
           </Localized>
diff --git a/src/reducers/publish.ts b/src/reducers/publish.ts
index 2d527341b2..896d1e4cc8 100644
--- a/src/reducers/publish.ts
+++ b/src/reducers/publish.ts
@@ -7,6 +7,7 @@ import { getShouldSanitizeByDefault } from '../profile-logic/sanitize';
 
 import type {
   CheckedSharingOptions,
+  SharingMode,
   PublishState,
   UploadState,
   UploadPhase,
@@ -45,21 +46,34 @@ function _getMostlyNonSanitizingSharingOptions(): CheckedSharingOptions {
   };
 }
 
-const checkedSharingOptions: Reducer<CheckedSharingOptions> = (
-  state = _getSanitizingSharingOptions(),
+// Both modes reference the same object until one is edited, so an untouched
+// profile is only encoded once.
+function _sharingOptionsForBothModes(
+  options: CheckedSharingOptions
+): Record<SharingMode, CheckedSharingOptions> {
+  return { download: options, upload: options };
+}
+
+const checkedSharingOptions: Reducer<
+  Record<SharingMode, CheckedSharingOptions>
+> = (
+  state = _sharingOptionsForBothModes(_getSanitizingSharingOptions()),
   action
 ) => {
   switch (action.type) {
     case 'PROFILE_LOADED': {
-      const newState = getShouldSanitizeByDefault(action.profile)
+      const options = getShouldSanitizeByDefault(action.profile)
         ? _getSanitizingSharingOptions()
         : _getMostlyNonSanitizingSharingOptions();
-      return newState;
+      return _sharingOptionsForBothModes(options);
     }
     case 'UPDATE_SHARING_OPTION':
       return {
         ...state,
-        [action.slug]: action.value,
+        [action.mode]: {
+          ...state[action.mode],
+          [action.slug]: action.value,
+        },
       };
     default:
       return state;
@@ -222,8 +236,8 @@ const sanitizedProfileEncodingState: Reducer<SanitizedProfileEncodingState> = (
 ): SanitizedProfileEncodingState => {
   switch (action.type) {
     case 'SANITIZED_PROFILE_ENCODING_STARTED': {
-      const { sanitizedProfile } = action;
-      return { phase: 'ENCODING', sanitizedProfile };
+      const { sanitizedProfile, encodingPromise } = action;
+      return { phase: 'ENCODING', sanitizedProfile, encodingPromise };
     }
     case 'SANITIZED_PROFILE_ENCODING_COMPLETED': {
       const { sanitizedProfile, profileData } = action;
diff --git a/src/selectors/publish.ts b/src/selectors/publish.ts
index 98b5fe6352..fe3d1aa103 100644
--- a/src/selectors/publish.ts
+++ b/src/selectors/publish.ts
@@ -32,7 +32,9 @@ import type {
   UploadPhase,
   State,
   Selector,
+  DangerousSelectorWithArguments,
   CheckedSharingOptions,
+  SharingMode,
   RemoveProfileInformation,
   DerivedMarkerInfo,
   ThreadIndex,
@@ -43,9 +45,10 @@ import { getThreadSelectors } from './per-thread';
 
 export const getPublishState: Selector<PublishState> = (state) => state.publish;
 
-export const getCheckedSharingOptions: Selector<CheckedSharingOptions> = (
-  state
-) => getPublishState(state).checkedSharingOptions;
+export const getCheckedSharingOptions: DangerousSelectorWithArguments<
+  CheckedSharingOptions,
+  SharingMode
+> = (state, mode) => getPublishState(state).checkedSharingOptions[mode];
 
 export const getFilenameString: Selector<string> = createSelector(
   getProfile,
@@ -70,9 +73,9 @@ export const getFilenameString: Selector<string> = createSelector(
   }
 );
 
-export const getRemoveProfileInformation: Selector<RemoveProfileInformation | null> =
+const _makeGetRemoveProfileInformation = (mode: SharingMode) =>
   createSelector(
-    getCheckedSharingOptions,
+    (state: State) => getCheckedSharingOptions(state, mode),
     getProfile,
     getCommittedRange,
     getHiddenGlobalTracks,
@@ -189,6 +192,21 @@ export const getRemoveProfileInformation: Selector<RemoveProfileInformation | nu
     }
   );
 
+// One memoized selector per mode, so switching panels doesn't recompute the
+// expensive sanitization.
+const _removeProfileInformationSelectors: Record<
+  SharingMode,
+  Selector<RemoveProfileInformation | null>
+> = {
+  download: _makeGetRemoveProfileInformation('download'),
+  upload: _makeGetRemoveProfileInformation('upload'),
+};
+
+export const getRemoveProfileInformation: DangerousSelectorWithArguments<
+  RemoveProfileInformation | null,
+  SharingMode
+> = (state, mode) => _removeProfileInformationSelectors[mode](state);
+
 /**
  * The derived markers are needed for profile sanitization, but they are also
  * needed for each thread. This means that we can't use the createSelector
@@ -234,16 +252,29 @@ function getTracedValuesBuffersForAllThreads(
  * UrlState needs to be updated, with things like mapping thread indexes,
  * or providing a new committed range.
  */
-export const getSanitizedProfile: Selector<SanitizeProfileResult> =
+const _makeGetSanitizedProfile = (mode: SharingMode) =>
   createSelector(
     getProfile,
     getDerivedMarkerInfoForAllThreads,
     getTracedValuesBuffersForAllThreads,
-    getRemoveProfileInformation,
+    (state: State) => getRemoveProfileInformation(state, mode),
     getMarkerSchemaByName,
     sanitizePII
   );
 
+const _sanitizedProfileSelectors: Record<
+  SharingMode,
+  Selector<SanitizeProfileResult>
+> = {
+  download: _makeGetSanitizedProfile('download'),
+  upload: _makeGetSanitizedProfile('upload'),
+};
+
+export const getSanitizedProfile: DangerousSelectorWithArguments<
+  SanitizeProfileResult,
+  SharingMode
+> = (state, mode) => _sanitizedProfileSelectors[mode](state);
+
 export const getSanitizedProfileEncodingState: Selector<
   SanitizedProfileEncodingState
 > = (state) => getPublishState(state).sanitizedProfileEncodingState;
diff --git a/src/test/store/publish.test.ts b/src/test/store/publish.test.ts
index 8ebf93b4ea..a38d10b558 100644
--- a/src/test/store/publish.test.ts
+++ b/src/test/store/publish.test.ts
@@ -4,6 +4,7 @@
 
 import {
   attemptToPublish,
+  encodeSanitizedProfile,
   resetUploadState,
   updateSharingOption,
   revertToPrePublishedState,
@@ -107,7 +108,7 @@ describe('getCheckedSharingOptions', function () {
       const { profile } = getProfileFromTextSamples('A');
       profile.meta.updateChannel = updateChannel;
       const { getState } = storeWithProfile(profile);
-      return getCheckedSharingOptions(getState());
+      return getCheckedSharingOptions(getState(), 'upload');
     }
 
     it('does not filter with nightly', function () {
@@ -146,22 +147,50 @@ describe('getCheckedSharingOptions', function () {
       profile.meta.updateChannel = 'release';
 
       const { getState, dispatch } = storeWithProfile(profile);
-      expect(getCheckedSharingOptions(getState())).toMatchObject({
+      expect(getCheckedSharingOptions(getState(), 'upload')).toMatchObject({
         includeHiddenThreads: false,
       });
 
-      dispatch(updateSharingOption('includeHiddenThreads', true));
+      dispatch(updateSharingOption('upload', 'includeHiddenThreads', true));
 
-      expect(getCheckedSharingOptions(getState())).toMatchObject({
+      expect(getCheckedSharingOptions(getState(), 'upload')).toMatchObject({
         includeHiddenThreads: true,
       });
 
-      dispatch(updateSharingOption('includeHiddenThreads', false));
+      dispatch(updateSharingOption('upload', 'includeHiddenThreads', false));
 
-      expect(getCheckedSharingOptions(getState())).toMatchObject({
+      expect(getCheckedSharingOptions(getState(), 'upload')).toMatchObject({
         includeHiddenThreads: false,
       });
     });
+
+    it('keeps the download and upload options independent', function () {
+      const { profile } = getProfileFromTextSamples('A');
+      profile.meta.updateChannel = 'nightly';
+      const { getState, dispatch } = storeWithProfile(profile);
+
+      dispatch(updateSharingOption('download', 'includeHiddenThreads', false));
+
+      expect(
+        getCheckedSharingOptions(getState(), 'download').includeHiddenThreads
+      ).toBe(false);
+      expect(
+        getCheckedSharingOptions(getState(), 'upload').includeHiddenThreads
+      ).toBe(true);
+    });
+  });
+});
+
+describe('encodeSanitizedProfile', function () {
+  it('reuses the in-flight encoding instead of compressing the same profile twice', async function () {
+    const { profile } = getProfileFromTextSamples('A');
+    const { dispatch } = storeWithProfile(profile);
+
+    const first = dispatch(encodeSanitizedProfile('upload'));
+    const second = dispatch(encodeSanitizedProfile('upload'));
+
+    expect(second.encodingPromise).toBe(first.encodingPromise);
+    await first.encodingPromise;
   });
 });
 
@@ -172,12 +201,15 @@ describe('getRemoveProfileInformation', function () {
     expect(getHasPreferenceMarkers(getState())).toEqual(false);
 
     // Setting includePreferenceValues option to false
-    dispatch(updateSharingOption('includePreferenceValues', false));
+    dispatch(updateSharingOption('upload', 'includePreferenceValues', false));
     expect(
-      getCheckedSharingOptions(getState()).includePreferenceValues
+      getCheckedSharingOptions(getState(), 'upload').includePreferenceValues
     ).toEqual(false);
 
-    const removeProfileInformation = getRemoveProfileInformation(getState());
+    const removeProfileInformation = getRemoveProfileInformation(
+      getState(),
+      'upload'
+    );
     // It should return early with null value.
     expect(removeProfileInformation).toEqual(null);
   });
@@ -196,7 +228,7 @@ describe('getRemoveProfileInformation', function () {
       '  - show [thread Thread <3>]',
     ]);
 
-    expect(getRemoveProfileInformation(getState())).toBe(null);
+    expect(getRemoveProfileInformation(getState(), 'upload')).toBe(null);
 
     // Hide the second process
     dispatch(hideGlobalTrack(1));
@@ -215,11 +247,12 @@ describe('getRemoveProfileInformation', function () {
     ]);
 
     // Change the preference to remove hidden tracks
-    dispatch(updateSharingOption('includeHiddenThreads', false));
+    dispatch(updateSharingOption('upload', 'includeHiddenThreads', false));
     // Note: Jest doesn't check Set values with toMatchObject, so we're checking the
     // properties individually. See https://github.com/facebook/jest/issues/11250
     expect(
-      ensureExists(getRemoveProfileInformation(getState())).shouldRemoveThreads
+      ensureExists(getRemoveProfileInformation(getState(), 'upload'))
+        .shouldRemoveThreads
     ).toEqual(new Set([2, 3]));
   });
 
@@ -240,8 +273,8 @@ describe('getRemoveProfileInformation', function () {
 
       // The checkbox is hidden for these profiles, so leaving it unchecked must
       // not drag the profile into the sanitization path.
-      dispatch(updateSharingOption('includeArgumentValues', false));
-      expect(getRemoveProfileInformation(getState())).toEqual(null);
+      dispatch(updateSharingOption('upload', 'includeArgumentValues', false));
+      expect(getRemoveProfileInformation(getState(), 'upload')).toEqual(null);
     });
 
     it('should ignore an argumentValues column with no values buffer', function () {
@@ -252,7 +285,7 @@ describe('getRemoveProfileInformation', function () {
       const { getState } = storeWithProfile(profile);
 
       expect(getHasJSTracingArgumentValues(getState())).toEqual(false);
-      expect(getRemoveProfileInformation(getState())).toEqual(null);
+      expect(getRemoveProfileInformation(getState(), 'upload')).toEqual(null);
     });
 
     it('should remove the traced argument values by default', function () {
@@ -261,18 +294,18 @@ describe('getRemoveProfileInformation', function () {
 
       // The option starts out unchecked, because the values may contain PII.
       expect(
-        getCheckedSharingOptions(getState()).includeArgumentValues
+        getCheckedSharingOptions(getState(), 'upload').includeArgumentValues
       ).toEqual(false);
       expect(
-        ensureExists(getRemoveProfileInformation(getState()))
+        ensureExists(getRemoveProfileInformation(getState(), 'upload'))
           .shouldRemoveArgumentValues
       ).toEqual(true);
     });
 
     it('should keep the traced argument values once the user opts in', function () {
       const { getState, dispatch } = getStoreWithArgumentValues();
-      dispatch(updateSharingOption('includeArgumentValues', true));
-      expect(getRemoveProfileInformation(getState())).toEqual(null);
+      dispatch(updateSharingOption('upload', 'includeArgumentValues', true));
+      expect(getRemoveProfileInformation(getState(), 'upload')).toEqual(null);
     });
   });
 });
@@ -539,7 +572,7 @@ describe('attemptToPublish', function () {
     expect(getSelectedTab(getState())).toEqual(originalTab);
 
     // Ensure we are sanitizing something.
-    dispatch(updateSharingOption('includeUrls', false));
+    dispatch(updateSharingOption('upload', 'includeUrls', false));
 
     // Now upload.
     const publishAttempt = dispatch(attemptToPublish());
@@ -644,7 +677,7 @@ describe('attemptToPublish', function () {
 
     // Keep screenshots in the sanitized profile so the screenshot track
     // survives sanitization (only the hidden thread will be removed).
-    dispatch(updateSharingOption('includeScreenshots', true));
+    dispatch(updateSharingOption('upload', 'includeScreenshots', true));
 
     // Locate the global track indexes.
     const globalTracksBefore = getGlobalTracks(getState());
@@ -743,7 +776,7 @@ describe('attemptToPublish', function () {
     const { dispatch, getState, resolveUpload, assertUploadSuccess } =
       setupFakeUploadsWithStore(store);
 
-    dispatch(updateSharingOption('includeScreenshots', true));
+    dispatch(updateSharingOption('upload', 'includeScreenshots', true));
     dispatch(changeTabFilter(tab1ID));
 
     const globalTracksBefore = getGlobalTracks(getState());
@@ -873,7 +906,7 @@ describe('attemptToPublish', function () {
       dispatch(commitRange(2, 4)); // This will keep samples 2, 3.
 
       // This shouldn't be sanitized, but let's double check.
-      expect(getRemoveProfileInformation(getState())).toBe(null);
+      expect(getRemoveProfileInformation(getState(), 'upload')).toBe(null);
 
       const publishAttempt = dispatch(attemptToPublish());
       resolveUpload(JWT_TOKEN);
@@ -924,10 +957,10 @@ describe('attemptToPublish', function () {
       // Profiles with updateChannel == 'release' are sanitized by
       // default, but let's make sure of that so that we don't have surprises in
       // the future.
-      expect(getCheckedSharingOptions(getState()).includeFullTimeRange).toEqual(
-        false
-      );
-      expect(getRemoveProfileInformation(getState())).toMatchObject({
+      expect(
+        getCheckedSharingOptions(getState(), 'upload').includeFullTimeRange
+      ).toEqual(false);
+      expect(getRemoveProfileInformation(getState(), 'upload')).toMatchObject({
         shouldFilterToCommittedRange: {
           start: 2,
           end: 4,
@@ -985,7 +1018,7 @@ describe('attemptToPublish', function () {
       dispatch(commitRange(1, 4)); // This will keep samples 1, 2, 3.
 
       // This shouldn't be sanitized, but let's double check.
-      expect(getRemoveProfileInformation(getState())).toBe(null);
+      expect(getRemoveProfileInformation(getState(), 'upload')).toBe(null);
 
       const publishAttempt1 = dispatch(attemptToPublish());
 
@@ -1002,8 +1035,8 @@ describe('attemptToPublish', function () {
       abortFunction();
 
       // Then we check new options to sanitize the profile, and attempt a new publish.
-      dispatch(updateSharingOption('includeFullTimeRange', false));
-      expect(getRemoveProfileInformation(getState())).toMatchObject({
+      dispatch(updateSharingOption('upload', 'includeFullTimeRange', false));
+      expect(getRemoveProfileInformation(getState(), 'upload')).toMatchObject({
         shouldFilterToCommittedRange: { start: 1, end: 4 },
       });
       const publishAttempt2 = dispatch(attemptToPublish());
diff --git a/src/types/actions.ts b/src/types/actions.ts
index a12905d3c5..7bff525522 100644
--- a/src/types/actions.ts
+++ b/src/types/actions.ts
@@ -46,6 +46,7 @@ import type {
   ApiQueryError,
   TableViewOptions,
   DecodedInstruction,
+  ProfileEncodingResult,
 } from './state';
 import type { CssPixels, StartEndRange, Milliseconds } from './units';
 import type { BrowserConnectionStatus } from '../app-logic/browser-connection';
@@ -162,6 +163,8 @@ export type CheckedSharingOptions = {
   includeArgumentValues: boolean;
 };
 
+export type SharingMode = 'download' | 'upload';
+
 // This type is used when selecting tracks in the timeline. Ctrl and Meta are
 // stored in the same property to accommodate all OSes.
 export type KeyboardModifiers = { ctrlOrMeta: boolean; shift: boolean };
@@ -649,12 +652,14 @@ type SidebarAction = {
 type PublishAction =
   | {
       readonly type: 'UPDATE_SHARING_OPTION';
+      readonly mode: SharingMode;
       readonly slug: keyof CheckedSharingOptions;
       readonly value: boolean;
     }
   | {
       readonly type: 'SANITIZED_PROFILE_ENCODING_STARTED';
       readonly sanitizedProfile: Profile;
+      readonly encodingPromise: Promise<ProfileEncodingResult>;
     }
   | {
       readonly type: 'SANITIZED_PROFILE_ENCODING_COMPLETED';
diff --git a/src/types/state.ts b/src/types/state.ts
index 7ea92a0ba9..f5198e2a7f 100644
--- a/src/types/state.ts
+++ b/src/types/state.ts
@@ -12,6 +12,7 @@ import type {
   TrackReference,
   TimelineType,
   CheckedSharingOptions,
+  SharingMode,
   LastNonShiftClickInformation,
 } from './actions';
 import type { TabSlug } from '../app-logic/tabs-handling';
@@ -217,11 +218,19 @@ export type UploadState = {
   generation: number;
 };
 
+export type ProfileEncodingResult =
+  | { type: 'SUCCESS'; profileData: Blob }
+  | { type: 'ERROR'; error: Error };
+
 export type SanitizedProfileEncodingState =
   | {
       phase: 'INITIAL';
     }
-  | { phase: 'ENCODING'; sanitizedProfile: Profile }
+  | {
+      phase: 'ENCODING';
+      sanitizedProfile: Profile;
+      encodingPromise: Promise<ProfileEncodingResult>;
+    }
   | {
       phase: 'DONE';
       sanitizedProfile: Profile;
@@ -230,7 +239,7 @@ export type SanitizedProfileEncodingState =
   | { phase: 'ERROR'; sanitizedProfile: Profile; error: Error };
 
 export type PublishState = {
-  readonly checkedSharingOptions: CheckedSharingOptions;
+  readonly checkedSharingOptions: Record<SharingMode, CheckedSharingOptions>;
   readonly sanitizedProfileEncodingState: SanitizedProfileEncodingState;
   readonly upload: UploadState;
   readonly isHidingStaleProfile: boolean;