feat(ui-mode): pr feedback

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

@@ -59,6 +59,11 @@
   text-align: center;
 }
 
+.network-font-preview-error {
+  margin-top: 8px;
+  text-align: center;
+}
+
 .tab-network .toolbar {
   min-height: 30px !important;
   background-color: initial !important;

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

@@ -116,7 +116,7 @@ const BodyTab: React.FunctionComponent<{
           reader.readAsDataURL(blob);
           setResponseBody({ dataUrl: (await eventPromise).target.result });
         } else if (isFont) {
-          const font = await response.blob().then(blob => blob.arrayBuffer());
+          const font = await response.arrayBuffer();
           setResponseBody({ font });
         } else {
           const formattedBody = formatBody(await response.text(), resource.response.content.mimeType);
@@ -141,15 +141,23 @@ const BodyTab: React.FunctionComponent<{
 const FontPreview: React.FunctionComponent<{
   font: BinaryData;
 }> = ({ font }) => {
+  const [isError, setIsError] = React.useState(false);
+
   React.useEffect(() => {
     const fontFace = new FontFace('font-preview', font);
+    if (fontFace.status === 'loaded')
       document.fonts.add(fontFace);
+    if (fontFace.status === 'error')
+      setIsError(true);
 
     return () => {
       document.fonts.delete(fontFace);
     };
   }, [font]);
 
+  if (isError)
+    return <div className='network-font-preview-error'>Could not load font preview</div>;
+
   return <div className='network-font-preview'>
     ABCDEFGHIJKLM<br />
     NOPQRSTUVWXYZ<br />