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

Closes #50691 and
#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,14 +412,19 @@ 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')`
  color: ${p => p.theme.subText};
  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}) {