Sort headers when displaying them

Summary: It's easier to scan the same header value of multiple requests when it's in roughly the same place for each one.

Reviewed By: mweststrate

Differential Revision: D24885172

fbshipit-source-id: 7be02903d2f9f79c8ba618e57c74169392f6244b

desktop/plugins/network/RequestDetails.tsx

@@ -271,20 +271,22 @@ class HeaderInspector extends Component<
     );
 
     const rows: any = [];
-    computedHeaders.forEach((value: string, key: string) => {
-      rows.push({
-        columns: {
-          key: {
-            value: <WrappingText>{key}</WrappingText>,
+    Array.from(computedHeaders.entries())
+      .sort((a, b) => (a[0] < b[0] ? -1 : a[0] == b[0] ? 0 : 1))
+      .forEach(([key, value]) => {
+        rows.push({
+          columns: {
+            key: {
+              value: <WrappingText>{key}</WrappingText>,
+            },
+            value: {
+              value: <WrappingText>{value}</WrappingText>,
+            },
           },
-          value: {
-            value: <WrappingText>{value}</WrappingText>,
-          },
-        },
-        copyText: value,
-        key,
+          copyText: value,
+          key,
+        });
       });
-    });
 
     return rows.length > 0 ? (
       <ManagedTable