Bug 1482798 - Use a flex layout for message body; r=bgrins.
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Tue, 21 Aug 2018 16:25:49 +0000
changeset 487765 038353b1a3c5f96b81fc2ff08687e4dfda250526
parent 487764 6003a205d723d0d6c9f47a651c1c80483abba8f4
child 487766 e28a399f05e8d7295955f2ce79484e64421427b5
push id9719
push userffxbld-merge
push dateFri, 24 Aug 2018 17:49:46 +0000
treeherdermozilla-beta@719ec98fba77 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1482798
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
devtools/client/themes/webconsole.css
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -83,36 +83,38 @@ a {
 
 .message-body-wrapper .table-widget-body {
   overflow: visible;
 }
 
 /* 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;
   color: white;
   background-color: red;
   border-radius: 40px;
   font: message-box;
   font-size: 0.9em;
   font-weight: 600;
+  margin-inline-start: 5px;
 }
 
 .message-repeats[value="1"] {
   display: none;
 }
 
 .message-location {
   max-width: 40vw;
-  grid-column: -1 / -2;
+  flex-shrink: 0;
   color: var(--frame-link-source);
+  margin-inline-start: 5px;
 }
 
 .stack-trace {
   /* The markup contains extra whitespace to improve formatting of clipboard text.
      Make sure this whitespace doesn't affect the HTML rendering */
   white-space: normal;
 }
 
@@ -135,29 +137,27 @@ a {
 
 .stack-trace .frame-link-function-display-name {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .message-flex-body {
-  display: grid;
-  grid-template-columns: 1fr auto max-content;
-  grid-gap: 5px;
+  display: flex;
 }
 
 .message-body {
   white-space: pre-wrap;
   word-wrap: break-word;
 }
 
 .message-flex-body > .message-body {
   display: block;
-  flex: auto;
+  flex: 1;
 }
 
 /* Network styles */
 
 .theme-dark .message.error {
   background-color: rgba(235, 83, 104, 0.17);
 }