feat(codecov): Use counter-reset instead of list marker (#43939)

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

@@ -191,7 +191,7 @@ const Context = ({
     }
   }
 
-  const startLineNo = hasContextSource ? frame.context[0][0] : undefined;
+  const startLineNo = hasContextSource ? frame.context[0][0] : 0;
   const hasStacktraceLink =
     frame.inApp &&
     !!frame.filename &&
@@ -201,6 +201,7 @@ const Context = ({
   return (
     <Wrapper
       start={startLineNo}
+      startLineNo={startLineNo}
       className={`${className} context ${isExpanded ? 'expanded' : ''}`}
     >
       {defined(frame.errors) && (
@@ -279,44 +280,27 @@ const StyledIconFlag = styled(IconFlag)`
 
 const StyledContextLine = styled(ContextLine)`
   background: inherit;
-  padding: 0;
-  text-indent: 20px;
   z-index: 1000;
-  position: relative;
+  list-style: none;
 
   &:before {
-    content: '';
-    display: block;
+    content: counter(frame);
+    counter-increment: frame;
+    text-align: center;
+    padding-left: ${space(3)};
+    padding-right: ${space(1.5)};
+    display: inline-block;
     height: 24px;
-    width: 50px;
-    left: 0;
-    top: 0;
-    bottom: 0;
     background: transparent;
-    position: absolute;
     z-index: 1;
-  }
-
-  &:after {
-    content: '';
-    display: block;
-    width: 2px;
-    border-color: transparent;
-    position: absolute;
-    left: 50px;
-    top: 0;
-    bottom: 0;
-    z-index: 9999;
-    height: 24px;
+    min-width: 58px;
+    border-right-style: solid;
+    border-right-color: transparent;
   }
 
   &.covered:before {
     background: ${p => p.theme.green100};
-  }
-
-  &.covered:after {
-    border-style: solid;
-    border-color: ${p => p.theme.green300};
+    border-right-color: ${p => p.theme.green300};
   }
 
   &.uncovered:before {
@@ -325,11 +309,8 @@ const StyledContextLine = styled(ContextLine)`
 
   &.partial:before {
     background: ${p => p.theme.yellow100};
-  }
-
-  &.partial:after {
-    border-style: dashed;
-    border-color: ${p => p.theme.yellow300};
+    border-right-style: dashed;
+    border-right-color: ${p => p.theme.yellow300};
   }
 
   &.active {
@@ -353,7 +334,9 @@ const StyledContextLine = styled(ContextLine)`
   }
 `;
 
-const Wrapper = styled('ol')`
+const Wrapper = styled('ol')<{startLineNo: number}>`
+  counter-reset: frame ${p => p.startLineNo - 1};
+
   && {
     border-radius: 0;
   }

static/less/group-detail.less

@@ -476,7 +476,6 @@ div.traceback > ul {
       display: none;
       background: #fff;
       margin: 0;
-      padding: 8px 0;
 
       table.key-value {
         border-top: 1px solid @trim;