fix(replay): Fix console.log formatting when CSS is not a string (#56967)

This fixes console formatting when the expected CSS properties is not a
string. Instead skip rendering.
This also includes some additional CSS properties to allow, I checked
the rendering of them and it does not seem to affect our console tab
layout.

Fixes JAVASCRIPT-2NTH

static/app/views/replays/detail/console/format.tsx

@@ -96,21 +96,34 @@ export default function Format({onExpand, expandPaths, args}: FormatProps) {
     }
   });
 
-  if (styling) {
+  if (styling && typeof styling === 'string') {
     const tempEl = document.createElement('div');
     tempEl.setAttribute('style', styling);
 
-    // Only allow certain CSS attributes
+    // Only allow certain CSS attributes, be careful of css properties that
+    // accept `url()`
+    //
+    // See the section above https://developer.mozilla.org/en-US/docs/Web/API/console#using_groups_in_the_console
+    // for the properties that Firefox supports.
     const styleObj = Object.fromEntries(
       [
+        ['background-color', 'backgroundColor'],
+        ['border-radius', 'borderRadius'],
         ['color', 'color'],
-        ['font-weight', 'fontWeight'],
+        ['font-size', 'fontSize'],
         ['font-style', 'fontStyle'],
+        ['font-weight', 'fontWeight'],
+        ['margin', 'margin'],
+        ['padding', 'padding'],
+        ['text-transform', 'textTransform'],
+        ['writing-mode', 'writingMode'],
       ]
         .map(([attr, reactAttr]) => [reactAttr, tempEl.style.getPropertyValue(attr)])
         .filter(([, val]) => !!val)
     );
 
+    styleObj.display = 'inline-block';
+
     pieces.push(
       <span key={`%c-${i - 1}`} style={styleObj}>
         {str}