Bug 1403977 - Switch to inline-block for message-body and children;r=nchevobbe
authorBrian Grinstead <bgrinstead@mozilla.com>
Fri, 10 Nov 2017 15:13:12 -0800
changeset 436165 43948076a0a623db3cbdd3718c888e7a41731511
parent 436164 45ee82268d2d8eebd49fb655ff302ba384a95488
child 436166 4c90faaa680da60a5fbe4230873ea7c06d0af04d
push id117
push userfmarier@mozilla.com
push dateTue, 28 Nov 2017 20:17:16 +0000
reviewersnchevobbe
bugs1403977
milestone59.0a1
Bug 1403977 - Switch to inline-block for message-body and children;r=nchevobbe MozReview-Commit-ID: KbHeA4uwas9
devtools/client/themes/webconsole.css
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -924,23 +924,23 @@ a.learn-more-link.webconsole-learn-more-
   color: var(--theme-body-color);
 }
 .theme-dark .webconsole-output-wrapper .message.error .tree.object-inspector,
 .theme-dark .webconsole-output-wrapper .message.warn .tree.object-inspector {
   --tree-indent-border-color: var(--theme-body-color);
 }
 
 .webconsole-output-wrapper .message-flex-body > .message-body {
-  display: flex;
-  flex-wrap: wrap;
+  display: inline-block;
   max-width: 100%;
 }
 
 .webconsole-output-wrapper .message-body > * {
   flex-shrink: 0;
+  vertical-align: top;
 }
 
 .message.startGroup .message-body > .objectBox-string,
 .message.startGroupCollapsed .message-body > .objectBox-string {
   color: var(--theme-body-color);
   font-weight: bold;
 }
 
@@ -1025,16 +1025,17 @@ a.learn-more-link.webconsole-learn-more-
 /* Hide 'Edit And Resend' button since the feature isn't
    supported in the Console panel. */
 .network.message #headers-panel .edit-and-resend-button {
   display: none;
 }
 
 .network .message-flex-body > .message-body {
   display: flex;
+  flex-wrap: wrap;
 }
 
 /* Output Wrapper */
 
 .webconsole-output-wrapper .message .indent {
   display: inline-block;
   border-inline-end: solid 1px var(--console-output-indent-border-color);
 }
@@ -1173,13 +1174,14 @@ body #output-container {
    * Should be properly fixed in https://bugzilla.mozilla.org/show_bug.cgi?id=1307937.
    */
   --arrow-width: 8px;
   --arrow-fill-color: #AFA8AB;
   --arrow-single-margin: 0.5rem;
   --tree-indent-width: var(--console-output-indent-width);
   --tree-indent-border-color: var(--console-output-indent-border-color);
   --tree-node-hover-background-color : var(--object-inspector-hover-background);
+  display: inline-block;
 }
 
 .theme-dark .webconsole-output-wrapper .object-inspector.tree {
   --arrow-fill-color: #7F7E81;
 }