Improve discoverability of downloading a local profile

[fatadel]

Main | Deploy preview

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 theheading and the action button differ, so Download saves the profile toa file and Share uploads it for a shareable link.

Closes #3620

---

Profile

This is how it looks like.

[codecov]

Codecov Report

❌ Patch coverage is 96.29630% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 83.62%. Comparing base (a7f5fe5) to head (3e094a0).
⚠️ Report is 24 commits behind head on main.

Files with missing lines	Patch %	Lines
src/components/app/MenuButtons/Publish.tsx	95.23%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6216      +/-   ##
==========================================
- Coverage   83.63%   83.62%   -0.02%     
==========================================
  Files         346      346              
  Lines       37179    37164      -15     
  Branches    10418    10323      -95     
==========================================
- Hits        31095    31077      -18     
- Misses       5656     5659       +3     
  Partials      428      428              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[canova]

Thanks, it's great that we have two different buttons now! It's a huge UX improvement over to the current state.

I'm not so sure about the reduced size of the title and the left alignment being gone now. I think I would prefer to keep the text alignment but reducing the left margin, and reducing the size of the icon. I think I think I like it more when the title is larger. Currently it looks a bit too close to the subtitle below. But this might just be a personal preference so it might be good to get feedback from others.

I was thinking maybe something like this:

Reduced the icon size and margins, and reduced the title from css class 40 to 30.

And these are the changes I made (on top of main, no this PR):

diff --git a/src/components/app/MenuButtons/Publish.css b/src/components/app/MenuButtons/Publish.css
index 60429e8b08..2784ff8ff1 100644
--- a/src/components/app/MenuButtons/Publish.css
+++ b/src/components/app/MenuButtons/Publish.css
@@ -75,17 +75,19 @@
 .publishPanelContent {
   position: relative;
 
-  /* This aligns all content, except the big icon. */
-  padding-left: 70px;
+  /* This aligns all content, except the 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;
+  /* "28px" This is the value to put the background image at the right location.
+   * The background image is scaled down to 18x18, so this puts it 10px left of
+   * the text. */
+  padding-left: 28px;
+  margin: 0 0 0 -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 {
diff --git a/src/components/app/MenuButtons/Publish.tsx b/src/components/app/MenuButtons/Publish.tsx
index b464465a33..5b4d0660b4 100644
--- a/src/components/app/MenuButtons/Publish.tsx
+++ b/src/components/app/MenuButtons/Publish.tsx
@@ -135,7 +135,7 @@
           className="publishPanelContent photon-body-10"
           onSubmit={this._onSubmit}
         >
-          <h1 className="publishPanelTitle photon-title-40">
+          <h1 className="publishPanelTitle photon-title-30">
             {isRepublish ? (
               <Localized id="MenuButtons--publish--reupload-performance-profile">
                 Re-upload Performance Profile

Let me know what you think! I guess these are all subjective though, so it might be good to ask opinions for others. cc @mstange @fqueze would be good if you have any opinions.

[fatadel]

@canova thanks for sharing your view! I am not quite sure what you mean by

the left alignment being gone now.

It is still left aligned, isn't it? Do you mean the spacing below the icon (throughout the whole block) being gone?

I think the size is reasonable, especially if we look at the titles of other menus, eg Profile Info. But I am happy to change it, if necessary. Let's indeed hear what others think.

[canova]

@canova thanks for sharing your view! I am not quite sure what you mean by

the left alignment being gone now.

It is still left aligned, isn't it? Do you mean the spacing below the icon (throughout the whole block) being gone?

Ah, yeah I mean the left alignment of title and the rest of the text. For example:

To me, this looks a bit cleaner in terms of the hierarchy of the panel.