Bug 1482798 - Use a flex layout for message body; r=bgrins.

It looks like we don't really need a grid layout anymore
for the message body AND it significantly reduces the time
spent on reflow.

Differential Revision: https://phabricator.services.mozilla.com/D3853

--HG--
extra : moz-landing-system : lando

devtools/client/themes/webconsole.css

@@ -88,7 +88,7 @@ a {
 /* The red bubble that shows the number of times a message is repeated */
 .message-repeats {
   -moz-user-select: none;
-  flex: none;
+  flex-shrink: 0;
   margin: 2px 6px;
   padding: 0 6px;
   height: 1.25em;
@@ -98,6 +98,7 @@ a {
   font: message-box;
   font-size: 0.9em;
   font-weight: 600;
+  margin-inline-start: 5px;
 }
 
 .message-repeats[value="1"] {
@@ -106,8 +107,9 @@ a {
 
 .message-location {
   max-width: 40vw;
-  grid-column: -1 / -2;
+  flex-shrink: 0;
   color: var(--frame-link-source);
+  margin-inline-start: 5px;
 }
 
 .stack-trace {
@@ -140,9 +142,7 @@ a {
 }
 
 .message-flex-body {
-  display: grid;
-  grid-template-columns: 1fr auto max-content;
-  grid-gap: 5px;
+  display: flex;
 }
 
 .message-body {
@@ -152,7 +152,7 @@ a {
 
 .message-flex-body > .message-body {
   display: block;
-  flex: auto;
+  flex: 1;
 }
 
 /* Network styles */