Use gray and italicized text for system frames (#51758)

Closes https://github.com/getsentry/sentry/issues/50691 and
https://github.com/getsentry/sentry/issues/50693

Distinguishes "In App" and "System" frames using gray/italicized text
with no pill for "System".

<img width="1125" alt="Screenshot 2023-07-17 at 4 01 52 PM"
src="https://github.com/getsentry/sentry/assets/22582037/1c6d31df-4b7c-4748-ac36-764fac744987">
<img width="1125" alt="Screenshot 2023-07-17 at 4 01 40 PM"
src="https://github.com/getsentry/sentry/assets/22582037/64efc0ec-5d86-4baf-8887-8f0c80a1a7ca">


### Non-Native stacktrace changes

![Screenshot 2023-06-29 at 10 17 37
AM](https://github.com/getsentry/sentry/assets/22582037/2a76e609-3fc5-489d-af81-8ef1b726d062)
![Screenshot 2023-06-29 at 10 16 38
AM](https://github.com/getsentry/sentry/assets/22582037/417fffd4-3402-4171-91b2-5883ec3ecc50)

static/app/components/events/interfaces/frame/deprecatedLine.tsx

@@ -274,6 +274,9 @@ export class DeprecatedLine extends Component<Props, State> {
     const {isHoverPreviewed, debugFrames, data, isANR, threadId, lockAddress} =
       this.props;
     const organization = this.props.organization;
+    const stacktraceChangesEnabled = !!organization?.features.includes(
+      'issue-details-stacktrace-improvements'
+    );
     const anrCulprit =
       isANR &&
       analyzeFrameForRootCause(
@@ -284,8 +287,14 @@ export class DeprecatedLine extends Component<Props, State> {
 
     return (
       <StrictClick onClick={this.isExpandable() ? this.toggleContext : undefined}>
-        <DefaultLine className="title" data-test-id="title">
-          <DefaultLineTitleWrapper>
+        <DefaultLine
+          className="title"
+          data-test-id="title"
+          stacktraceChangesEnabled={stacktraceChangesEnabled}
+        >
+          <DefaultLineTitleWrapper
+            stacktraceChangesEnabled={stacktraceChangesEnabled && !data.inApp}
+          >
             <LeftLineTitle>
               <SourceMapWarning frame={data} debugFrames={debugFrames} />
               <div>
@@ -306,7 +315,9 @@ export class DeprecatedLine extends Component<Props, State> {
             </SuspectFrameTag>
           ) : null}
           {!data.inApp ? (
-            <InAppTag>{t('System')}</InAppTag>
+            stacktraceChangesEnabled ? null : (
+              <InAppTag>{t('System')}</InAppTag>
+            )
           ) : (
             <InAppTag type="info">{t('In App')}</InAppTag>
           )}
@@ -332,10 +343,18 @@ export class DeprecatedLine extends Component<Props, State> {
 
     const leadHint = this.renderLeadHint();
     const packageStatus = this.packageStatus();
+    const organization = this.props.organization;
+    const stacktraceChangesEnabled = !!organization?.features.includes(
+      'issue-details-stacktrace-improvements'
+    );
 
     return (
       <StrictClick onClick={this.isExpandable() ? this.toggleContext : undefined}>
-        <DefaultLine className="title as-table" data-test-id="title">
+        <DefaultLine
+          className="title as-table"
+          data-test-id="title"
+          stacktraceChangesEnabled={stacktraceChangesEnabled}
+        >
           <NativeLineContent isFrameAfterLastNonApp={!!isFrameAfterLastNonApp}>
             <PackageInfo>
               {leadHint}
@@ -374,9 +393,16 @@ export class DeprecatedLine extends Component<Props, State> {
               isHoverPreviewed={isHoverPreviewed}
             />
           </NativeLineContent>
-          {this.renderExpander()}
+          <DefaultLineTitleWrapper
+            stacktraceChangesEnabled={stacktraceChangesEnabled && !data.inApp}
+          >
+            {this.renderExpander()}
+          </DefaultLineTitleWrapper>
+
           {!data.inApp ? (
-            <InAppTag>{t('System')}</InAppTag>
+            stacktraceChangesEnabled ? null : (
+              <InAppTag>{t('System')}</InAppTag>
+            )
           ) : (
             <InAppTag type="info">{t('In App')}</InAppTag>
           )}
@@ -453,10 +479,12 @@ const RepeatedFrames = styled('div')`
   display: inline-block;
 `;
 
-const DefaultLineTitleWrapper = styled('div')`
+const DefaultLineTitleWrapper = styled('div')<{stacktraceChangesEnabled: boolean}>`
   display: flex;
   align-items: center;
   justify-content: space-between;
+  color: ${p => (p.stacktraceChangesEnabled ? p.theme.subText : '')};
+  font-style: ${p => (p.stacktraceChangesEnabled ? 'italic' : '')};
 `;
 
 const LeftLineTitle = styled('div')`
@@ -492,9 +520,12 @@ const NativeLineContent = styled('div')<{isFrameAfterLastNonApp: boolean}>`
   }
 `;
 
-const DefaultLine = styled('div')`
+const DefaultLine = styled('div')<{stacktraceChangesEnabled: boolean}>`
   display: grid;
-  grid-template-columns: 1fr auto ${space(2)}; /* sm icon size */
+  grid-template-columns: ${p =>
+    p.stacktraceChangesEnabled
+      ? `1fr auto auto`
+      : `1fr auto ${space(2)}`}; /* sm icon size */
   align-items: center;
 `;
 

static/app/components/events/interfaces/nativeFrame.tsx

@@ -29,6 +29,7 @@ import {space} from 'sentry/styles/space';
 import {Frame, PlatformType, SentryAppComponent} from 'sentry/types';
 import {Event} from 'sentry/types/event';
 import {defined} from 'sentry/utils';
+import useOrganization from 'sentry/utils/useOrganization';
 import withSentryAppComponents from 'sentry/utils/withSentryAppComponents';
 
 import DebugImage from './debugMeta/debugImage';
@@ -215,11 +216,19 @@ function NativeFrame({
   const addressTooltip = getAddressTooltip();
   const functionName = getFunctionName();
   const status = getStatus();
+  const organization = useOrganization();
+  const stacktraceChangesEnabled = !!organization?.features.includes(
+    'issue-details-stacktrace-improvements'
+  );
 
   return (
     <StackTraceFrame data-test-id="stack-trace-frame">
       <StrictClick onClick={handleToggleContext}>
-        <RowHeader expandable={expandable} expanded={expanded}>
+        <RowHeader
+          expandable={expandable}
+          expanded={expanded}
+          stacktraceChangesEnabled={stacktraceChangesEnabled && !frame.inApp}
+        >
           <SymbolicatorIcon>
             {status === 'error' ? (
               <Tooltip
@@ -298,10 +307,12 @@ function NativeFrame({
             )}
           </GroupingCell>
           <TypeCell>
-            {frame.inApp ? (
-              <Tag type="info">{t('In App')}</Tag>
+            {!frame.inApp ? (
+              stacktraceChangesEnabled ? null : (
+                <Tag>{t('System')}</Tag>
+              )
             ) : (
-              <Tag>{t('System')}</Tag>
+              <Tag type="info">{t('In App')}</Tag>
             )}
           </TypeCell>
           <ExpandCell>
@@ -401,6 +412,7 @@ const Package = styled('span')`
   overflow: hidden;
   text-overflow: ellipsis;
   width: 100%;
+  padding-right: 2px; /* Needed to prevent text cropping with italic font */
 `;
 
 const FileName = styled('span')`
@@ -408,7 +420,11 @@ const FileName = styled('span')`
   border-bottom: 1px dashed ${p => p.theme.border};
 `;
 
-const RowHeader = styled('span')<{expandable: boolean; expanded: boolean}>`
+const RowHeader = styled('span')<{
+  expandable: boolean;
+  expanded: boolean;
+  stacktraceChangesEnabled: boolean;
+}>`
   display: grid;
   grid-template-columns: repeat(2, auto) 1fr repeat(2, auto) ${space(2)};
   grid-template-rows: repeat(2, auto);
@@ -418,6 +434,8 @@ const RowHeader = styled('span')<{expandable: boolean; expanded: boolean}>`
   background-color: ${p => p.theme.bodyBackground};
   font-size: ${p => p.theme.codeFontSize};
   padding: ${space(1)};
+  color: ${p => (p.stacktraceChangesEnabled ? p.theme.subText : '')};
+  font-style: ${p => (p.stacktraceChangesEnabled ? 'italic' : '')};
   ${p => p.expandable && `cursor: pointer;`};
 
   @media (min-width: ${p => p.theme.breakpoints.small}) {