chore(trace-viewer): less bright status code icon

packages/trace-viewer/src/ui/networkResourceDetails.css

@@ -61,3 +61,27 @@
 .tab-network .tabbed-pane-tab.selected {
   font-weight: bold;
 }
+
+.green-circle::before,
+.red-circle::before,
+.yellow-circle::before {
+  content: "";
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  vertical-align: text-top;
+  margin-right: 2px;
+}
+
+.green-circle::before {
+  background-color: var(--vscode-charts-green);
+}
+
+.red-circle::before {
+  background-color: var(--vscode-charts-red);
+}
+
+.yellow-circle::before {
+  background-color: var(--vscode-charts-yellow);
+}

packages/trace-viewer/src/ui/networkResourceDetails.tsx

@@ -80,11 +80,8 @@ const RequestTab: React.FunctionComponent<{
     <div className='network-request-details-header'>General</div>
     <div className='network-request-details-url'>{`URL: ${resource.request.url}`}</div>
     <div className='network-request-details-general'>{`Method: ${resource.request.method}`}</div>
-    <div className='network-request-details-general'>{`Status Code: ${
+    <div className='network-request-details-general'>Status Code: <span className={statusClass(resource.response.status)}>
-      resource.response.status >= 200 && resource.response.status < 400
+      {`${resource.response.status} ${resource.response.statusText}`}</span></div>
-        ? `🟢 ${resource.response.status} ${resource.response.statusText}`
-        : `🔴 ${resource.response.status} ${resource.response.statusText}`
-    }`}</div>
     <div className='network-request-details-header'>Request Headers</div>
     <div className='network-request-details-headers'>{resource.request.headers.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div>
     {requestBody && <div className='network-request-details-header'>Request Body</div>}
@@ -135,6 +132,16 @@ const BodyTab: React.FunctionComponent<{
   </div>;
 };
 
+function statusClass(statusCode: number): string {
+  if (statusCode < 300 || statusCode === 304) {
+    return 'green-circle';
+  } else if (statusCode < 400) {
+    return 'yellow-circle';
+  } else {
+    return 'red-circle';
+  }
+}
+
 function formatBody(body: string | null, contentType: string): string {
   if (body === null)
     return 'Loading...';