Bug 1415211 - Realigned webconsole message components. draft 505bafeafb66
authorTim Xie <tim.xie@mail.utoronto.ca>
Wed, 28 Feb 2018 01:44:42 -0500
branch505bafeafb66
changeset 760793 697a8a8c3374e1f1a404ce41fcce179503eefd69
parent 760606 505bafeafb66b0083ce1fca8eec2d061f1a5ebb7
child 761197 055f5d68880bade2cfab767b2bca4d38408ff7cc
push id100760
push userbmo:tim.xie@mail.utoronto.ca
push dateWed, 28 Feb 2018 07:24:52 +0000
bugs1415211
milestone60.0a1
Bug 1415211 - Realigned webconsole message components. MozReview-Commit-ID: FtbwGg5rU07
devtools/client/themes/webconsole.css
devtools/client/webconsole/new-console-output/components/message-types/NetworkEventMessage.js
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -33,16 +33,17 @@ a {
   box-sizing: border-box;
 }
 
 .message > .prefix,
 .message > .timestamp {
   flex: none;
   color: var(--theme-comment);
   margin: 3px 6px 0 0;
+  align-items: center;
 }
 
 .message > .indent {
   flex: none;
 }
 
 .message > .icon {
   flex: none;
@@ -154,16 +155,17 @@ a {
 .message-body {
   white-space: pre-wrap;
   word-wrap: break-word;
 }
 
 .message-flex-body > .message-body {
   display: block;
   flex: auto;
+  align-items: center;
 }
 
 #output-wrapper {
   direction: ltr;
   overflow: auto;
   -moz-user-select: text;
   position: relative;
 }
@@ -605,20 +607,18 @@ textbox.jsterm-input-node[focused="true"
 }
 
 .message[open] .stacktrace,
 .message.open .stacktrace {
   display: block;
 }
 
 .message .theme-twisty {
-  display: inline-block;
-  vertical-align: middle;
-  margin: 3px 0 0 0;
-  flex-shrink: 0;
+  position: relative;
+  top: 2px;
 }
 
 /*Do not mirror the twisty because container force to ltr */
 .message .theme-twisty:dir(rtl),
 .message .theme-twisty:-moz-locale-dir(rtl) {
   transform: none;
 }
 
--- a/devtools/client/webconsole/new-console-output/components/message-types/NetworkEventMessage.js
+++ b/devtools/client/webconsole/new-console-output/components/message-types/NetworkEventMessage.js
@@ -107,17 +107,17 @@ function NetworkEventMessage({
     ? dom.span({ className: "xhr" }, l10n.getStr("webConsoleXhrIndicator"))
     : null;
   const requestUrl = dom.a({ className: "url", title: request.url, onClick: toggle },
     request.url);
   const statusBody = statusInfo
     ? dom.a({ className: "status", onClick: toggle }, statusInfo)
     : null;
 
-  const messageBody = [method, xhr, requestUrl, statusBody];
+  const messageBody = [xhr, method, requestUrl, statusBody];
 
   // API consumed by Net monitor UI components. Most of the method
   // are not needed in context of the Console panel (atm) and thus
   // let's just provide empty implementation.
   // Individual methods might be implemented step by step as needed.
   let connector = {
     viewSourceInDebugger: (url, line) => {
       serviceContainer.onViewSourceInDebugger({url, line});