diff --git a/packages/trace-viewer/src/traceModel.ts b/packages/trace-viewer/src/traceModel.ts
index e95b706166..df7ae59988 100644
--- a/packages/trace-viewer/src/traceModel.ts
+++ b/packages/trace-viewer/src/traceModel.ts
@@ -37,6 +37,7 @@ export class TraceModel {
   private _version: number | undefined;
   private _backend!: TraceModelBackend;
   private _attachments = new Map<string, trace.AfterActionTraceEventAttachment>();
+  private _resourceToContentType = new Map<string, string>();
 
   constructor() {
   }
@@ -100,6 +101,13 @@ export class TraceModel {
       }
       unzipProgress(++done, total);
 
+      for (const resource of contextEntry.resources) {
+        if (resource.request.postData?._sha1)
+          this._resourceToContentType.set(resource.request.postData._sha1, stripEncodingFromContentType(resource.request.postData.mimeType));
+        if (resource.response.content?._sha1)
+          this._resourceToContentType.set(resource.response.content._sha1, stripEncodingFromContentType(resource.response.content.mimeType));
+      }
+
       this.contextEntries.push(contextEntry);
     }
 
@@ -111,7 +119,10 @@ export class TraceModel {
   }
 
   async resourceForSha1(sha1: string): Promise<Blob | undefined> {
-    return this._backend.readBlob('resources/' + sha1);
+    const blob = await this._backend.readBlob('resources/' + sha1);
+    if (!blob)
+      return;
+    return new Blob([blob], { type: this._resourceToContentType.get(sha1) || 'application/octet-stream' });
   }
 
   attachmentForSha1(sha1: string): trace.AfterActionTraceEventAttachment | undefined {
@@ -324,3 +335,10 @@ export class TraceModel {
     };
   }
 }
+
+function stripEncodingFromContentType(contentType: string) {
+  const charset = contentType.match(/^(.*);\s*charset=.*$/);
+  if (charset)
+    return charset[1];
+  return contentType;
+}
diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.tsx b/packages/trace-viewer/src/ui/networkResourceDetails.tsx
index 80a4912984..08418a9def 100644
--- a/packages/trace-viewer/src/ui/networkResourceDetails.tsx
+++ b/packages/trace-viewer/src/ui/networkResourceDetails.tsx
@@ -108,7 +108,7 @@ const NetworkResourceDetails: React.FunctionComponent<{
         <div className='network-request-details-header'>Request Headers</div>
         <div className='network-request-headers'>{resource.request.headers.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div>
         {requestBody && <div className='network-request-details-header'>Request Body</div>}
-        {requestBody && <CodeMirrorWrapper text={requestBody.text} language={requestBody.language} />}
+        {requestBody && <CodeMirrorWrapper text={requestBody.text} language={requestBody.language} readOnly/>}
       </div>,
     },
     {
@@ -126,7 +126,7 @@ const NetworkResourceDetails: React.FunctionComponent<{
       render: () => <div className='network-request-details'>
         {!resource.response.content._sha1 && <div>Response body is not available for this request.</div>}
         {responseBody && responseBody.dataUrl && <img draggable='false' src={responseBody.dataUrl} />}
-        {responseBody && responseBody.text && <CodeMirrorWrapper text={responseBody.text} language={responseBody.language} />}
+        {responseBody && responseBody.text && <CodeMirrorWrapper text={responseBody.text} language={responseBody.language} readOnly/>}
       </div>,
     },
   ]} selectedTab={selectedTab} setSelectedTab={setSelectedTab}/>;