fix(ui) Fix rendering of hatched bars in firefox (#21140)

Firefox has a hard time with subpixel aliasing which results in really
jagged looking hatching. Widening the hatching a bit enables better
rendering in firefox and consistent results across browsers.

Author: markstory

src/sentry/static/sentry/app/components/events/interfaces/spans/spanBar.tsx

@@ -31,7 +31,7 @@ import {
   MINIMAP_SPAN_BAR_HEIGHT,
   NUM_OF_SPANS_FIT_IN_MINI_MAP,
 } from './header';
-import {SPAN_ROW_HEIGHT, SpanRow, zIndex} from './styles';
+import {SPAN_ROW_HEIGHT, SpanRow, zIndex, getHatchPattern} from './styles';
 import * as DividerHandlerManager from './dividerHandlerManager';
 import * as CursorGuideHandler from './cursorGuideHandler';
 import SpanDetail from './spanDetail';
@@ -1100,25 +1100,14 @@ const DurationPill = styled('div')<{
   }
 `;
 
-const getHatchPattern = ({spanBarHatch}) => {
-  if (spanBarHatch === true) {
-    return `
-      background-image: linear-gradient(45deg, #dedae3 10%, #f4f2f7 10%, #f4f2f7 50%, #dedae3 50%, #dedae3 60%, #f4f2f7 60%, #f4f2f7 100%);
-      background-size: 6.5px 6.5px;
-  `;
-  }
-
-  return null;
-};
-
 export const SpanBarRectangle = styled('div')<{spanBarHatch: boolean}>`
   position: relative;
   height: 100%;
   min-width: 1px;
   user-select: none;
   transition: border-color 0.15s ease-in-out;
   border-right: 1px solid rgba(0, 0, 0, 0);
-  ${getHatchPattern}
+  ${p => getHatchPattern(p, '#dedae3', '#f4f2f7')}
 `;
 
 const StyledIconWarning = styled(IconWarning)`

src/sentry/static/sentry/app/components/events/interfaces/spans/styles.tsx

@@ -54,3 +54,38 @@ export const SpanRowMessage = styled(SpanRow)`
     margin-left: ${space(2)};
   }
 `;
+
+type HatchProps = {
+  spanBarHatch: boolean;
+};
+
+export function getHatchPattern(
+  {spanBarHatch}: HatchProps,
+  primary: string,
+  alternate: string
+) {
+  if (spanBarHatch === true) {
+    return `
+      background-image: linear-gradient(135deg,
+        ${alternate},
+        ${alternate} 2.5px,
+        ${primary} 2.5px,
+        ${primary} 5px,
+        ${alternate} 6px,
+        ${alternate} 8px,
+        ${primary} 8px,
+        ${primary} 11px,
+        ${alternate} 11px,
+        ${alternate} 14px,
+        ${primary} 14px,
+        ${primary} 16.5px,
+        ${alternate} 16.5px,
+        ${alternate} 19px,
+        ${primary} 20px
+      );
+      background-size: 16px 16px;
+    `;
+  }
+
+  return null;
+}

src/sentry/static/sentry/app/views/performance/compare/spanBar.tsx

@@ -6,7 +6,11 @@ import theme from 'app/utils/theme';
 import space from 'app/styles/space';
 import Count from 'app/components/count';
 import {TreeDepthType} from 'app/components/events/interfaces/spans/types';
-import {SPAN_ROW_HEIGHT, SpanRow} from 'app/components/events/interfaces/spans/styles';
+import {
+  SPAN_ROW_HEIGHT,
+  SpanRow,
+  getHatchPattern,
+} from 'app/components/events/interfaces/spans/styles';
 import {
   TOGGLE_BORDER_BOX,
   SpanRowCellContainer,
@@ -511,22 +515,11 @@ class SpanBar extends React.Component<Props, State> {
   }
 }
 
-const getHatchPattern = ({spanBarHatch}) => {
-  if (spanBarHatch === true) {
-    return `
-        background-image: linear-gradient(135deg, #9f92fa 33.33%, #302839 33.33%, #302839 50%, #9f92fa 50%, #9f92fa 83.33%, #302839 83.33%, #302839 100%);
-        background-size: 4.24px 4.24px;
-    `;
-  }
-
-  return null;
-};
-
-const ComparisonSpanBarRectangle = styled(SpanBarRectangle)`
+const ComparisonSpanBarRectangle = styled(SpanBarRectangle)<{spanBarHatch: boolean}>`
   position: absolute;
   left: 0;
   height: 16px;
-  ${getHatchPattern};
+  ${p => getHatchPattern(p, theme.purple300, theme.gray700)}
 `;
 
 const ComparisonLabel = styled('div')`