Streamline some code related to profile publishing (#5608)

[Production](https://profiler.firefox.com/public/283zgs51v5kc3yxtjkm5w2x249468x99ydds610/flame-graph/?globalTrackOrder=1w46705&hiddenGlobalTracks=5&hiddenLocalTracksByPid=5472-0wAiAkwBhBjwE6E8wEhEjwFiFkwHv~5511-0wyp~5607-0wxhxjwCj~5696-0wxj~5855-0wCbCdwDi~6253-0whkwy4&localTrackOrderByPid=5472-HnwHpHbBaBcBnBpAnEhEfEgBlC8FeDqBkEqD7E5CjCkghy6z7zdA1EaA2A3E3EvF0FlF1FnF2FoG3G4FpG5GbGcG7GdGfGgGeGhwGoGuGpwGtGvH2H0H1H3H4HhwHmAuEuFawFcH7HvCtAgDcAoAsAtC7ClCsDsHrHsE0CuBgAbwAeAvB0B2wB4B6wB9BbBdBoBqwC2ErEtAiE9ElEmEoEjHfHgA7wAaF3F4jkA5A6DrDtDuAjAkF5wF9FvwG2AlAqB1G8EeHdC3FdC5DeDfEcE1E7ArBjEsHqHcAfCqCpCiDpC9DgCawChDhwDoBhAhilwy5y7wz6z8wzczewA0HaE2C4FkBeG9HtEdA4BfDdHeEpBmE6FfwFiFqwFtGaEkH9FmG6H8EbEnD8wDaC6CvwD6f0weBiFjFuApCrAmE8EiDvE4B5CmCnHuCoDbH5H6~6253-8mursewgy0wy2cdapx3x1n9txhwxm7x4hx5bx06oxewxgqx6wxd3w5021vliwkxnwxvy4x2y3~5855-D5DhCrC9Cagwimwox0wx8xbxcxexdxfwxhxjwxlxpwy1y4wybydwyuz0wz2z6wz8zcwzkzqwAnApwBoC6wC8CuD2CvD0DbwDdCqqCbD9Day2y3ycD1krx9xaxiz3wz5znwzpDfD7DiD6zlzmAoC2BpwC1yvjlpD4DeCsD8swvxmwxoz9wzbD3dwf0w4b5wacCtDgCpC5C3C4CdCgwCeChCjwClCiCmwCoCc&thread=Kv&v=11)
| [Main
branch](https://main--perf-html.netlify.app/public/283zgs51v5kc3yxtjkm5w2x249468x99ydds610/flame-graph/?globalTrackOrder=1w46705&hiddenGlobalTracks=5&hiddenLocalTracksByPid=5472-0wAiAkwBhBjwE6E8wEhEjwFiFkwHv~5511-0wyp~5607-0wxhxjwCj~5696-0wxj~5855-0wCbCdwDi~6253-0whkwy4&localTrackOrderByPid=5472-HnwHpHbBaBcBnBpAnEhEfEgBlC8FeDqBkEqD7E5CjCkghy6z7zdA1EaA2A3E3EvF0FlF1FnF2FoG3G4FpG5GbGcG7GdGfGgGeGhwGoGuGpwGtGvH2H0H1H3H4HhwHmAuEuFawFcH7HvCtAgDcAoAsAtC7ClCsDsHrHsE0CuBgAbwAeAvB0B2wB4B6wB9BbBdBoBqwC2ErEtAiE9ElEmEoEjHfHgA7wAaF3F4jkA5A6DrDtDuAjAkF5wF9FvwG2AlAqB1G8EeHdC3FdC5DeDfEcE1E7ArBjEsHqHcAfCqCpCiDpC9DgCawChDhwDoBhAhilwy5y7wz6z8wzczewA0HaE2C4FkBeG9HtEdA4BfDdHeEpBmE6FfwFiFqwFtGaEkH9FmG6H8EbEnD8wDaC6CvwD6f0weBiFjFuApCrAmE8EiDvE4B5CmCnHuCoDbH5H6~6253-8mursewgy0wy2cdapx3x1n9txhwxm7x4hx5bx06oxewxgqx6wxd3w5021vliwkxnwxvy4x2y3~5855-D5DhCrC9Cagwimwox0wx8xbxcxexdxfwxhxjwxlxpwy1y4wybydwyuz0wz2z6wz8zcwzkzqwAnApwBoC6wC8CuD2CvD0DbwDdCqqCbD9Day2y3ycD1krx9xaxiz3wz5znwzpDfD7DiD6zlzmAoC2BpwC1yvjlpD4DeCsD8swvxmwxoz9wzbD3dwf0w4b5wacCtDgCpC5C3C4CdCgwCeChCjwClCiCmwCoCc&thread=Kv&v=11)
| [Deploy
preview](https://deploy-preview-5608--perf-html.netlify.app/public/283zgs51v5kc3yxtjkm5w2x249468x99ydds610/flame-graph/?globalTrackOrder=1w46705&hiddenGlobalTracks=5&hiddenLocalTracksByPid=5472-0wAiAkwBhBjwE6E8wEhEjwFiFkwHv~5511-0wyp~5607-0wxhxjwCj~5696-0wxj~5855-0wCbCdwDi~6253-0whkwy4&localTrackOrderByPid=5472-HnwHpHbBaBcBnBpAnEhEfEgBlC8FeDqBkEqD7E5CjCkghy6z7zdA1EaA2A3E3EvF0FlF1FnF2FoG3G4FpG5GbGcG7GdGfGgGeGhwGoGuGpwGtGvH2H0H1H3H4HhwHmAuEuFawFcH7HvCtAgDcAoAsAtC7ClCsDsHrHsE0CuBgAbwAeAvB0B2wB4B6wB9BbBdBoBqwC2ErEtAiE9ElEmEoEjHfHgA7wAaF3F4jkA5A6DrDtDuAjAkF5wF9FvwG2AlAqB1G8EeHdC3FdC5DeDfEcE1E7ArBjEsHqHcAfCqCpCiDpC9DgCawChDhwDoBhAhilwy5y7wz6z8wzczewA0HaE2C4FkBeG9HtEdA4BfDdHeEpBmE6FfwFiFqwFtGaEkH9FmG6H8EbEnD8wDaC6CvwD6f0weBiFjFuApCrAmE8EiDvE4B5CmCnHuCoDbH5H6~6253-8mursewgy0wy2cdapx3x1n9txhwxm7x4hx5bx06oxewxgqx6wxd3w5021vliwkxnwxvy4x2y3~5855-D5DhCrC9Cagwimwox0wx8xbxcxexdxfwxhxjwxlxpwy1y4wybydwyuz0wz2z6wz8zcwzkzqwAnApwBoC6wC8CuD2CvD0DbwDdCqqCbD9Day2y3ycD1krx9xaxiz3wz5znwzpDfD7DiD6zlzmAoC2BpwC1yvjlpD4DeCsD8swvxmwxoz9wzbD3dwf0w4b5wacCtDgCpC5C3C4CdCgwCeChCjwClCiCmwCoCc&thread=Kv&v=11)

I was looking at this code when I was doing the worker compression stuff
and noticed some opportunities for improvement. Nothing urgent here,
just some cleanup.

The "Simplify profile publishing flow" commit fixes one bug: If you
trigger a new compression while an existing compression is already going
on, and the new compression finishes before the old compression, then
the old compression's completion will no longer overwrite the size in
the download button with an outdated value.

Author: mstange

src/actions/publish.ts

@@ -9,9 +9,9 @@ import type { SanitizeProfileResult } from 'firefox-profiler/profile-logic/sanit
 import {
   getUploadGeneration,
   getSanitizedProfile,
-  getSanitizedProfileData,
   getRemoveProfileInformation,
   getPrePublishedState,
+  getSanitizedProfileEncodingState,
 } from 'firefox-profiler/selectors/publish';
 import {
   getDataSource,
@@ -36,14 +36,50 @@ import type {
   StartEndRange,
   ThreadIndex,
   State,
+  Profile,
 } from 'firefox-profiler/types';
+import { compress } from 'firefox-profiler/utils/gz';
+import { serializeProfile } from 'firefox-profiler/profile-logic/process-profile';
 
-export function toggleCheckedSharingOptions(
-  slug: keyof CheckedSharingOptions
+export function updateSharingOption(
+  slug: keyof CheckedSharingOptions,
+  value: boolean
 ): Action {
   return {
-    type: 'TOGGLE_CHECKED_SHARING_OPTION',
+    type: 'UPDATE_SHARING_OPTION',
     slug,
+    value,
+  };
+}
+
+export function sanitizedProfileEncodingStarted(
+  sanitizedProfile: Profile
+): Action {
+  return {
+    type: 'SANITIZED_PROFILE_ENCODING_STARTED',
+    sanitizedProfile,
+  };
+}
+
+export function sanitizedProfileEncodingCompleted(
+  sanitizedProfile: Profile,
+  profileData: Blob
+): Action {
+  return {
+    type: 'SANITIZED_PROFILE_ENCODING_COMPLETED',
+    sanitizedProfile,
+    profileData,
+  };
+}
+
+export function sanitizedProfileEncodingFailed(
+  sanitizedProfile: Profile,
+  error: Error
+): Action {
+  return {
+    type: 'SANITIZED_PROFILE_ENCODING_FAILED',
+    sanitizedProfile,
+    error,
   };
 }
 
@@ -196,6 +232,90 @@ 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;
+  }
+  return encodingResult.profileData;
+}
+
+export type InflightProfileEncoding = {
+  sanitizedProfile: Profile;
+  encodingPromise: Promise<ProfileEncodingResult>;
+};
+
+/**
+ * Kick off "encoding" of the sanitized profile. Specifically this means:
+ * - Compute the sanitized profile
+ * - 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.
+ *
+ * This thunk action is synchronous.
+ */
+export function encodeSanitizedProfile(
+  previousInflightEncoding?: InflightProfileEncoding
+): 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 encodingState = getSanitizedProfileEncodingState(state);
+    if (
+      encodingState.phase === 'DONE' &&
+      encodingState.sanitizedProfile === sanitizedProfile
+    ) {
+      // We already have an encoded version of this profile in our state! Use it.
+      return {
+        sanitizedProfile,
+        encodingPromise: Promise.resolve({
+          type: 'SUCCESS',
+          profileData: encodingState.profileData,
+        }),
+      };
+    }
+
+    // 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 () {
+      try {
+        dispatch(sanitizedProfileEncodingStarted(sanitizedProfile));
+        const gzipData = await compress(serializeProfile(sanitizedProfile));
+        const blob = new Blob([gzipData], { type: 'application/octet-binary' });
+        dispatch(sanitizedProfileEncodingCompleted(sanitizedProfile, blob));
+        return { type: 'SUCCESS', profileData: blob };
+      } catch (error) {
+        dispatch(sanitizedProfileEncodingFailed(sanitizedProfile, error));
+        console.error('Error while compressing the profile data', error);
+        return { type: 'ERROR', error };
+      }
+    })();
+
+    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
@@ -208,7 +328,9 @@ async function persistJustUploadedProfileInformationToDb(
  * 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(): ThunkAction<Promise<boolean>> {
+export function attemptToPublish(
+  previousInflightEncoding?: InflightProfileEncoding
+): ThunkAction<Promise<boolean>> {
   return async (dispatch, getState) => {
     try {
       sendAnalytics({
@@ -242,21 +364,29 @@ export function attemptToPublish(): ThunkAction<Promise<boolean>> {
       dispatch(uploadCompressionStarted(abortfunction));
 
       const sanitizedInformation = getSanitizedProfile(prePublishedState);
-      const gzipData = await getSanitizedProfileData(prePublishedState);
+      const profileEncoding = dispatch(
+        encodeSanitizedProfile(previousInflightEncoding)
+      );
+      const encodingResult = await profileEncoding.encodingPromise;
 
       // The previous line was async, check to make sure that this request is still valid.
       // The upload could have been aborted while we were compressing the data.
       if (uploadGeneration !== getUploadGeneration(getState())) {
         return false;
       }
 
+      const encodedProfile = unwrapEncodedProfile(encodingResult);
+
       dispatch(uploadStarted());
 
       // Upload the profile, and notify it with the amount of data that has been
       // uploaded.
-      const hashOrToken = await startUpload(gzipData, (uploadProgress) => {
-        dispatch(updateUploadProgress(uploadProgress));
-      });
+      const hashOrToken = await startUpload(
+        encodedProfile,
+        (uploadProgress) => {
+          dispatch(updateUploadProgress(uploadProgress));
+        }
+      );
 
       const hash = extractProfileTokenFromJwt(hashOrToken);
 

src/components/app/MenuButtons/Publish.css

@@ -30,18 +30,18 @@
   background-image: url(../../../../res/img/svg/error.svg);
 }
 
-.menuButtonsPublishPanel {
+.publishPanelPanel {
   --width: 510px;
 }
 
-.menuButtonsPublishContent {
+.publishPanelContent {
   position: relative;
 
   /* This aligns all content, except the big icon. */
   padding-left: 70px;
 }
 
-.menuButtonsPublishTitle {
+.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;
@@ -50,32 +50,32 @@
   line-height: 44px; /* This is the height of the background image */
 }
 
-.menuButtonsPublishInfoDescription {
+.publishPanelInfoDescription {
   flex: 1;
   margin-bottom: 1em;
   line-height: 1.5;
 }
 
-.menuButtonsPublishDataChoices {
+.publishPanelDataChoices {
   margin-left: 10px;
 }
 
-.menuButtonsPublishDataChoicesLabel {
+.publishPanelDataChoicesLabel {
   display: flex;
   margin: 4px 0;
 }
 
-.menuButtonsPublishDataChoicesIndicator {
+.publishPanelDataChoicesIndicator {
   margin-left: 8px;
 }
 
-.menuButtonsPublishButtons {
+.publishPanelButtons {
   display: flex;
   justify-content: right;
   margin-top: 20px;
 }
 
-.menuButtonsPublishButton {
+.publishPanelButton {
   display: inline-flex;
   min-width: 132px;
   box-sizing: content-box;
@@ -87,30 +87,30 @@
   text-decoration: none;
 }
 
-.menuButtonsPublishButtonDisabled {
+.publishPanelButtonDisabled {
   opacity: 0.6;
 }
 
-.menuButtonsPublishButtonDisabled:hover,
-.menuButtonsPublishButtonDisabled:active:hover {
+.publishPanelButtonDisabled:hover,
+.publishPanelButtonDisabled:active:hover {
   background-color: var(--grey-90-a10);
 }
 
-.menuButtonsPublishButtonsSvg {
+.publishPanelButtonsSvg {
   position: relative;
   top: 4px;
   display: inline-block;
   margin-top: -6px;
   margin-right: 5px;
 }
 
-.menuButtonsPublishButtonsSvgUpload {
+.publishPanelButtonsSvgUpload {
   width: 20px;
   height: 20px;
   background: url(../../../../res/img/svg/upload.svg) center center no-repeat;
 }
 
-.menuButtonsPublishButtonsSvgDownload {
+.publishPanelButtonsSvgDownload {
   width: 20px;
   height: 20px;
   background: url(../../../../res/img/svg/download.svg) center center no-repeat;
@@ -122,28 +122,28 @@
   font-size: 11px;
 }
 
-.menuButtonsPublishUpload {
+.publishPanelUpload {
   position: relative;
   padding: 10px 0;
 }
 
-.menuButtonsPublishUploadTop {
+.publishPanelUploadTop {
   margin: 10px;
 }
 
-.menuButtonsPublishUploadPercentage {
+.publishPanelUploadPercentage {
   margin: 10px 0;
   color: var(--blue-60);
 }
 
-.menuButtonsPublishUploadBar {
+.publishPanelUploadBar {
   overflow: hidden;
   height: 5px;
   border-radius: 2px;
   background-color: var(--grey-40);
 }
 
-.menuButtonsPublishUploadBarInner {
+.publishPanelUploadBarInner {
   position: absolute;
   top: 0;
   height: 3px;
@@ -173,13 +173,13 @@
   }
 }
 
-.menuButtonsPublishError {
+.publishPanelError {
   margin: 10px 0;
 }
 
 /* Do not animate the publish animation for stripes at the top loading bar. */
 @media (prefers-reduced-motion) {
-  .menuButtonsPublishUploadBarInner {
+  .publishPanelUploadBarInner {
     animation: none;
   }
 }