feat(replays): New column size and improve of a11y (#37765)

<!-- Describe your PR here. -->
### Changes
- Added new column `size` to the network table
- Improved a11y and some styles

Closes #37615 

![image](https://user-images.githubusercontent.com/39612839/184424404-c8b20eba-d9ba-4421-802c-91717613fad6.png)

Author: jesus4497

static/app/views/replays/detail/network/index.tsx

@@ -1,6 +1,7 @@
 import {Fragment, useCallback, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
 
+import FileSize from 'sentry/components/fileSize';
 import {PanelTable, PanelTableHeader} from 'sentry/components/panels';
 import Placeholder from 'sentry/components/placeholder';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
@@ -9,6 +10,7 @@ import Tooltip from 'sentry/components/tooltip';
 import {IconArrow} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
+import {defined} from 'sentry/utils';
 import {ColorOrAlias} from 'sentry/utils/theme';
 import {
   ISortConfig,
@@ -93,25 +95,37 @@ function NetworkList({replayRecord, networkSpans}: Props) {
   };
 
   const columns = [
-    t('Status'),
-    <SortItem key="path" onClick={() => handleSort('description')}>
-      {t('Path')} {sortArrow('description')}
+    <SortItem key="status">{t('Status')}</SortItem>,
+    <SortItem key="path">
+      <UnstyledButton onClick={() => handleSort('description')}>
+        {t('Path')} {sortArrow('description')}
+      </UnstyledButton>
     </SortItem>,
-    <SortItem key="type" onClick={() => handleSort('op')}>
-      {t('Type')} {sortArrow('op')}
+    <SortItem key="type">
+      <UnstyledButton onClick={() => handleSort('op')}>
+        {t('Type')} {sortArrow('op')}
+      </UnstyledButton>
     </SortItem>,
-    <SortItem
-      key="duration"
-      onClick={() =>
-        handleSort('duration', row => {
-          return row.endTimestamp - row.startTimestamp;
-        })
-      }
-    >
-      {t('Duration')} {sortArrow('duration')}
+    <SortItem key="size">
+      <UnstyledButton onClick={() => handleSort('size', row => row.data.size)}>
+        {t('Size')} {sortArrow('size')}
+      </UnstyledButton>
+    </SortItem>,
+    <SortItem key="duration">
+      <UnstyledButton
+        onClick={() =>
+          handleSort('duration', row => {
+            return row.endTimestamp - row.startTimestamp;
+          })
+        }
+      >
+        {t('Duration')} {sortArrow('duration')}
+      </UnstyledButton>
     </SortItem>,
-    <SortItem key="timestamp" onClick={() => handleSort('startTimestamp')}>
-      {t('Timestamp')} {sortArrow('startTimestamp')}
+    <SortItem key="timestamp">
+      <UnstyledButton onClick={() => handleSort('startTimestamp')}>
+        {t('Timestamp')} {sortArrow('startTimestamp')}
+      </UnstyledButton>
     </SortItem>,
   ];
 
@@ -134,6 +148,7 @@ function NetworkList({replayRecord, networkSpans}: Props) {
               overlayStyle={{
                 maxWidth: '500px !important',
               }}
+              showOnlyOnOverflow
             >
               <Text>{network.description}</Text>
             </Tooltip>
@@ -144,6 +159,14 @@ function NetworkList({replayRecord, networkSpans}: Props) {
         <Item {...columnHandlers}>
           <Text>{network.op.replace('resource.', '')}</Text>
         </Item>
+        <Item {...columnHandlers} numeric>
+          {defined(network.data.size) ? (
+            <FileSize bytes={network.data.size} />
+          ) : (
+            <EmptyText>({t('Missing size')})</EmptyText>
+          )}
+        </Item>
+
         <Item {...columnHandlers} numeric>
           {`${(networkEndTimestamp - networkStartTimestamp).toFixed(2)}ms`}
         </Item>
@@ -183,7 +206,7 @@ const Item = styled('div')<{center?: boolean; color?: ColorOrAlias; numeric?: bo
 `;
 
 const StyledPanelTable = styled(PanelTable)<{columns: number}>`
-  grid-template-columns: max-content minmax(200px, 1fr) repeat(3, max-content);
+  grid-template-columns: max-content minmax(200px, 1fr) repeat(4, max-content);
   grid-template-rows: 24px repeat(auto-fit, 28px);
   font-size: ${p => p.theme.fontSizeSmall};
   margin-bottom: 0;
@@ -201,23 +224,24 @@ const StyledPanelTable = styled(PanelTable)<{columns: number}>`
       justify-content: end;
     }
 
-    /* 2nd last column */
-    &:nth-child(${p => p.columns}n - 1) {
+    /* 3rd and 2nd last column */
+    &:nth-child(${p => p.columns}n - 1),
+    &:nth-child(${p => p.columns}n - 2) {
       text-align: right;
       justify-content: end;
     }
   }
 
   ${/* sc-selector */ PanelTableHeader} {
     min-height: 24px;
-    padding: ${space(0.5)} ${space(1.5)};
     border-radius: 0;
     color: ${p => p.theme.subText};
     line-height: 16px;
 
-    /* Last and 2nd last header columns. As these are flex direction columns we have to treat them separately */
+    /* Last, 2nd and 3rd last header columns. As these are flex direction columns we have to treat them separately */
     &:nth-child(${p => p.columns}n),
-    &:nth-child(${p => p.columns}n - 1) {
+    &:nth-child(${p => p.columns}n - 1),
+    &:nth-child(${p => p.columns}n - 2) {
       justify-content: center;
       align-items: end;
     }
@@ -244,7 +268,8 @@ const EmptyText = styled(Text)`
 `;
 
 const SortItem = styled('span')`
-  cursor: pointer;
+  padding: ${space(0.5)} ${space(1.5)};
+  width: 100%;
 
   svg {
     vertical-align: text-top;
@@ -254,6 +279,10 @@ const SortItem = styled('span')`
 const UnstyledButton = styled('button')`
   border: 0;
   background: none;
+  padding: 0;
+  text-transform: inherit;
+  width: 100%;
+  text-align: unset;
 `;
 
 export default NetworkList;