fix(ui): Span tree connector design (#30498)

* fix(ui): Span tree connector color

The current color for span tree connectors is gray200. This is too light. Instead, we should use gray300 at 0.4 opacity.

* ref(ui): Increase line width for span tree connectors

The current line color is gray200. This is too light when the line width is 1px. Increasing the width to 2px makes the line more prominent.

* fix(ui): spanGroupBar offset

There is a slight offset on spanGroupBar (see PR #30498). This commit fixes that.

* fix(ui): TreeConnector offset by 1px

* fix(ui): Fix TransactionBar connector offset

* fix(ui): Fix TransactionBar connector offset

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

@@ -323,7 +323,7 @@ class SpanBar extends React.Component<SpanBarProps, SpanBarState> {
       if (hasToggler) {
         return (
           <ConnectorBar
-            style={{right: '16px', height: '10px', bottom: '-5px', top: 'auto'}}
+            style={{right: '15px', height: '10px', bottom: '-5px', top: 'auto'}}
             key={`${spanID}-last`}
             orphanBranch={false}
           />
@@ -342,7 +342,7 @@ class SpanBar extends React.Component<SpanBarProps, SpanBarState> {
         // which does not exist.
         return null;
       }
-      const left = ((spanTreeDepth - depth) * (TOGGLE_BORDER_BOX / 2) + 1) * -1;
+      const left = ((spanTreeDepth - depth) * (TOGGLE_BORDER_BOX / 2) + 2) * -1;
 
       return (
         <ConnectorBar
@@ -359,9 +359,9 @@ class SpanBar extends React.Component<SpanBarProps, SpanBarState> {
       connectorBars.push(
         <ConnectorBar
           style={{
-            right: '16px',
+            right: '15px',
             height: `${ROW_HEIGHT / 2}px`,
-            bottom: isLast ? `-${ROW_HEIGHT / 2}px` : '0',
+            bottom: isLast ? `-${ROW_HEIGHT / 2 + 2}px` : '0',
             top: 'auto',
           }}
           key={`${spanID}-last-bottom`}

static/app/components/events/interfaces/spans/spanGroupBar.tsx

@@ -233,7 +233,7 @@ class SpanGroupBar extends React.Component<Props> {
         // which does not exist.
         return null;
       }
-      const left = ((spanTreeDepth - depth) * (TOGGLE_BORDER_BOX / 2) + 1) * -1;
+      const left = ((spanTreeDepth - depth) * (TOGGLE_BORDER_BOX / 2) + 2) * -1;
 
       return (
         <ConnectorBar
@@ -247,9 +247,9 @@ class SpanGroupBar extends React.Component<Props> {
     connectorBars.push(
       <ConnectorBar
         style={{
-          right: '16px',
+          right: '15px',
           height: `${ROW_HEIGHT / 2}px`,
-          bottom: `-${ROW_HEIGHT / 2}px`,
+          bottom: `-${ROW_HEIGHT / 2 + 1}px`,
           top: 'auto',
         }}
         key="collapsed-span-group-row-bottom"

static/app/components/performance/waterfall/treeConnector.tsx

@@ -14,9 +14,9 @@ const TREE_TOGGLE_CONTAINER_WIDTH = 40;
 export const ConnectorBar = styled('div')<{orphanBranch: boolean}>`
   height: 250%;
 
-  border-left: 1px ${p => (p.orphanBranch ? 'dashed' : 'solid')} ${p => p.theme.border};
-  top: -5px;
+  border-left: 2px ${p => (p.orphanBranch ? 'dashed' : 'solid')} ${p => p.theme.border};
   position: absolute;
+  top: 0;
 `;
 
 type TogglerTypes = OmitHtmlDivProps<{
@@ -25,34 +25,37 @@ type TogglerTypes = OmitHtmlDivProps<{
 }>;
 
 export const TreeConnector = styled('div')<TogglerTypes & {orphanBranch: boolean}>`
-  height: ${p => (p.isLast ? ROW_HEIGHT / 2 : ROW_HEIGHT)}px;
+  height: ${p => (p.isLast ? ROW_HEIGHT / 2 + 1 : ROW_HEIGHT)}px;
   width: 100%;
-  border-left: ${p => {
-    return `1px ${p.orphanBranch ? 'dashed' : 'solid'} ${p.theme.border}`;
-  }};
+  border-left: ${p => `2px ${p.orphanBranch ? 'dashed' : 'solid'} ${p.theme.border};`};
   position: absolute;
   top: 0;
 
-  &:before {
-    content: '';
-    height: 1px;
-    border-bottom: ${p =>
-      `1px ${p.orphanBranch ? 'dashed' : 'solid'} ${p.theme.border};`};
-    left: 0;
-    width: 100%;
-    position: absolute;
-    bottom: ${p => (p.isLast ? '0' : '50%')};
-  }
+  ${p =>
+    p.isLast
+      ? `
+      border-bottom: 2px ${p.orphanBranch ? 'dashed' : 'solid'} ${p.theme.border};
+      border-bottom-left-radius: ${p.theme.borderRadius};`
+      : `
+      &:before {
+        content: '';
+        height: 2px;
+        left: -2px;
+        border-bottom: 2px solid ${p.theme.border};
+        width: calc(100% - 2px);
+        position: absolute;
+        bottom: calc(50% - 1px);
+      }`}
 
   &:after {
     content: '';
     background-color: ${p => p.theme.border};
-    border-radius: 4px;
-    height: 3px;
-    width: 3px;
+    border-radius: 50%;
+    height: 6px;
+    width: 6px;
     position: absolute;
     right: 0;
-    top: ${ROW_HEIGHT / 2 - 2}px;
+    top: ${ROW_HEIGHT / 2 - 3}px;
   }
 `;
 
@@ -76,6 +79,7 @@ export const TreeToggle = styled('div')<SpanTreeTogglerAndDivProps>`
   font-size: 10px;
   line-height: 0;
   z-index: 1;
+  box-shadow: ${p => p.theme.dropShadowLightest};
 
   ${p => getToggleTheme(p)}
 `;

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

@@ -93,7 +93,7 @@ class SpanBar extends React.Component<Props, State> {
       if (hasToggler) {
         return (
           <ConnectorBar
-            style={{right: '16px', height: '10px', bottom: '-5px', top: 'auto'}}
+            style={{right: '15px', height: '10px', bottom: '-5px', top: 'auto'}}
             key={`${spanID}-last`}
             orphanBranch={false}
           />
@@ -112,7 +112,7 @@ class SpanBar extends React.Component<Props, State> {
         // which does not exist.
         return null;
       }
-      const left = ((spanTreeDepth - depth) * (TOGGLE_BORDER_BOX / 2) + 1) * -1;
+      const left = ((spanTreeDepth - depth) * (TOGGLE_BORDER_BOX / 2) + 2) * -1;
 
       return (
         <ConnectorBar
@@ -129,9 +129,9 @@ class SpanBar extends React.Component<Props, State> {
       connectorBars.push(
         <ConnectorBar
           style={{
-            right: '16px',
+            right: '15px',
             height: '10px',
-            bottom: isLast ? `-${ROW_HEIGHT / 2}px` : '0',
+            bottom: isLast ? `-${ROW_HEIGHT / 2 + 1}px` : '0',
             top: 'auto',
           }}
           key={`${spanID}-last`}

static/app/views/performance/traceDetails/transactionBar.tsx

@@ -105,7 +105,7 @@ class TransactionBar extends React.Component<Props, State> {
       if (hasToggle) {
         return (
           <ConnectorBar
-            style={{right: '16px', height: '10px', bottom: '-5px', top: 'auto'}}
+            style={{right: '15px', height: '10px', bottom: '-5px', top: 'auto'}}
             orphanBranch={false}
           />
         );
@@ -122,7 +122,7 @@ class TransactionBar extends React.Component<Props, State> {
           return null;
         }
 
-        const left = -1 * getOffset(generation - depth - 1) - 1;
+        const left = -1 * getOffset(generation - depth - 1) - 2;
 
         return (
           <ConnectorBar
@@ -138,9 +138,9 @@ class TransactionBar extends React.Component<Props, State> {
       connectorBars.push(
         <ConnectorBar
           style={{
-            right: '16px',
+            right: '15px',
             height: '10px',
-            bottom: isLast ? `-${ROW_HEIGHT / 2}px` : '0',
+            bottom: isLast ? `-${ROW_HEIGHT / 2 + 1}px` : '0',
             top: 'auto',
           }}
           key={`${eventId}-last`}