fix(native-stack-trace-v2): Update Option display logic (#30137)

static/app/components/events/traceEventDataSection/displayOptions.tsx

@@ -28,6 +28,7 @@ type Props = {
   hasAbsoluteFilePaths: boolean;
   hasAbsoluteAddresses: boolean;
   hasAppOnlyFrames: boolean;
+  raw: boolean;
 };
 
 function DisplayOptions({
@@ -39,9 +40,21 @@ function DisplayOptions({
   hasAbsoluteAddresses,
   hasAppOnlyFrames,
   platform,
+  raw,
 }: Props) {
   function getDisplayOptions(): SelectValue<string>[] {
     if (platform === 'objc' || platform === 'native' || platform === 'cocoa') {
+      if (raw) {
+        return [
+          {
+            label: t('Unsymbolicated'),
+            value: DisplayOption.MINIFIED,
+            disabled: !hasMinified,
+            tooltip: !hasMinified ? t('Unsymbolicated version not available') : undefined,
+          },
+        ];
+      }
+
       return [
         {
           label: t('Unsymbolicated'),
@@ -82,6 +95,17 @@ function DisplayOptions({
       ];
     }
 
+    if (raw) {
+      return [
+        {
+          label: t('Minified'),
+          value: DisplayOption.MINIFIED,
+          disabled: !hasMinified,
+          tooltip: !hasMinified ? t('Minified version not available') : undefined,
+        },
+      ];
+    }
+
     return [
       {
         label: t('Minified'),
@@ -119,7 +143,11 @@ function DisplayOptions({
           hideBottomBorder={false}
         >
           {tct('[activeOptionsQuantity] Active', {
-            activeOptionsQuantity: activeDisplayOptions.length,
+            activeOptionsQuantity: raw
+              ? activeDisplayOptions.includes(DisplayOption.MINIFIED)
+                ? 1
+                : 0
+              : activeDisplayOptions.length,
           })}
         </OptionsButton>
       )}
@@ -175,17 +203,9 @@ const Wrapper = styled(DropdownControl)`
     width: 100%;
     max-width: 100%;
   }
-  grid-column: 1/-1;
-  grid-row: 3/3;
 
-  @media (min-width: ${p => p.theme.breakpoints[0]}) {
-    grid-column: 2/2;
-    grid-row: 2/2;
-  }
-
-  @media (min-width: ${p => p.theme.breakpoints[3]}) {
-    grid-column: auto;
-    grid-row: auto;
+  @media (max-width: ${p => p.theme.breakpoints[0]}) {
+    grid-column: 1/-1;
   }
 `;
 

static/app/components/events/traceEventDataSection/index.tsx

@@ -110,11 +110,13 @@ function TraceEventDataSection({
 
   const childProps = {recentFirst, raw, activeDisplayOptions};
 
+  const nativePlatform = isNativePlatform(platform);
+
   return (
     <EventDataSection
       type={type}
       title={
-        <Header raw={raw}>
+        <Header raw={raw} nativePlatform={nativePlatform}>
           {showPermalink ? (
             <div>
               <Permalink href={'#' + type} className="permalink">
@@ -127,65 +129,52 @@ function TraceEventDataSection({
           )}
           {!stackTraceNotFound && (
             <Fragment>
-              <RawContentWrapper>
-                <RawToggler
-                  name="raw-stack-trace"
-                  label={t('Raw')}
-                  hideControlState
-                  value={raw}
-                  onChange={() => setState({...state, raw: !raw})}
+              <RawToggler
+                name="raw-stack-trace"
+                label={t('Raw')}
+                hideControlState
+                value={raw}
+                onChange={() => setState({...state, raw: !raw})}
+              />
+              {raw && nativePlatform && (
+                <DownloadButton
+                  size="small"
+                  href={getDownloadHref()}
+                  title={t('Download raw stack trace file')}
+                >
+                  {t('Download')}
+                </DownloadButton>
+              )}
+              {!raw && (
+                <SortOptions
+                  disabled={!hasNewestFirst}
+                  activeSortOption={
+                    recentFirst ? SortOption.RECENT_FIRST : SortOption.RECENT_LAST
+                  }
+                  onChange={newSortOption =>
+                    setState({
+                      ...state,
+                      recentFirst: newSortOption === SortOption.RECENT_FIRST,
+                    })
+                  }
                 />
-                {raw && isNativePlatform(platform) && (
-                  <LargeScreenDownloadButton
-                    size="small"
-                    href={getDownloadHref()}
-                    title={t('Download raw stack trace file')}
-                  >
-                    {t('Download')}
-                  </LargeScreenDownloadButton>
-                )}
-              </RawContentWrapper>
-              {raw ? (
-                isNativePlatform(platform) && (
-                  <SmallScreenDownloadButton
-                    size="small"
-                    href={getDownloadHref()}
-                    title={t('Download raw stack trace file')}
-                  >
-                    {t('Download')}
-                  </SmallScreenDownloadButton>
-                )
-              ) : (
-                <Fragment>
-                  <SortOptions
-                    disabled={!hasNewestFirst}
-                    activeSortOption={
-                      recentFirst ? SortOption.RECENT_FIRST : SortOption.RECENT_LAST
-                    }
-                    onChange={newSortOption =>
-                      setState({
-                        ...state,
-                        recentFirst: newSortOption === SortOption.RECENT_FIRST,
-                      })
-                    }
-                  />
-                  <DisplayOptions
-                    platform={platform}
-                    hasAppOnlyFrames={hasAppOnlyFrames}
-                    hasAbsoluteAddresses={hasAbsoluteAddresses}
-                    hasAbsoluteFilePaths={hasAbsoluteFilePaths}
-                    hasVerboseFunctionNames={hasVerboseFunctionNames}
-                    hasMinified={hasMinified}
-                    activeDisplayOptions={activeDisplayOptions}
-                    onChange={newActiveDisplayOptions =>
-                      setState({
-                        ...state,
-                        activeDisplayOptions: newActiveDisplayOptions,
-                      })
-                    }
-                  />
-                </Fragment>
               )}
+              <DisplayOptions
+                raw={raw}
+                platform={platform}
+                hasAppOnlyFrames={hasAppOnlyFrames}
+                hasAbsoluteAddresses={hasAbsoluteAddresses}
+                hasAbsoluteFilePaths={hasAbsoluteFilePaths}
+                hasVerboseFunctionNames={hasVerboseFunctionNames}
+                hasMinified={hasMinified}
+                activeDisplayOptions={activeDisplayOptions}
+                onChange={newActiveDisplayOptions =>
+                  setState({
+                    ...state,
+                    activeDisplayOptions: newActiveDisplayOptions,
+                  })
+                }
+              />
             </Fragment>
           )}
         </Header>
@@ -203,24 +192,30 @@ function TraceEventDataSection({
 export {TraceEventDataSectionContext};
 export default TraceEventDataSection;
 
-const Header = styled('div')<{raw: boolean}>`
+const Header = styled('div')<{raw: boolean; nativePlatform: boolean}>`
   display: grid;
   grid-template-columns: 1fr max-content;
-  grid-template-rows: ${p => (p.raw ? 'repeat(2, 1f)' : 'repeat(3, 1fr)')};
+  grid-template-rows: ${p =>
+    p.raw && !p.nativePlatform ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)'};
   grid-gap: ${space(1)};
   align-items: center;
   flex: 1;
   z-index: 3;
 
   @media (min-width: ${p => p.theme.breakpoints[0]}) {
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: ${p => (p.raw ? '1fr' : 'repeat(2, 1fr)')};
+    grid-template-columns: ${p =>
+      p.raw && !p.nativePlatform
+        ? '1fr max-content minmax(140px, auto)'
+        : 'repeat(2, 1fr)'};
+    grid-template-rows: ${p => (p.raw && !p.nativePlatform ? '1fr' : 'repeat(2, 1fr)')};
   }
 
   @media (min-width: ${p => p.theme.breakpoints[3]}) {
     grid-template-columns: ${p =>
       p.raw
-        ? '1fr repeat(2, max-content)'
+        ? p.nativePlatform
+          ? '1fr max-content max-content minmax(140px, auto)'
+          : '1fr max-content minmax(140px, auto)'
         : '1fr max-content minmax(159px, auto) minmax(140px, auto)'};
     grid-template-rows: 1fr;
   }
@@ -242,25 +237,9 @@ const RawToggler = styled(BooleanField)`
   }
 `;
 
-const RawContentWrapper = styled('div')`
-  display: grid;
-  grid-auto-flow: column;
-  justify-content: flex-end;
-`;
-
-const LargeScreenDownloadButton = styled(Button)`
-  display: none;
-  margin-left: ${space(1)};
-  @media (min-width: ${p => p.theme.breakpoints[0]}) {
-    display: block;
-  }
-`;
-
-const SmallScreenDownloadButton = styled(Button)`
-  display: block;
-  grid-column: 1/-1;
-  @media (min-width: ${p => p.theme.breakpoints[0]}) {
-    display: none;
+const DownloadButton = styled(Button)`
+  @media (max-width: ${p => p.theme.breakpoints[0]}) {
+    grid-column: 1/-1;
   }
 `;
 

static/app/components/events/traceEventDataSection/sortOptions.tsx

@@ -64,16 +64,8 @@ const Wrapper = styled(DropdownControl)`
   button {
     width: 100%;
   }
-  grid-column: 1/-1;
-  grid-row: 2/3;
 
-  @media (min-width: ${p => p.theme.breakpoints[0]}) {
-    grid-column: 1/2;
-    grid-row: 2/2;
-  }
-
-  @media (min-width: ${p => p.theme.breakpoints[2]}) {
-    grid-column: auto;
-    grid-row: auto;
+  @media (max-width: ${p => p.theme.breakpoints[0]}) {
+    grid-column: 1/-1;
   }
 `;