Bug 1415211 - Realigned XHR label, set property margin-inline-start of XHR to 0; r=nchevobbe draft
authorTim Xie <tim.xie@mail.utoronto.ca>
Fri, 09 Mar 2018 02:59:19 -0500
changeset 765182 898370c2dce16320c941b8a844b3d08881ae91fe
parent 760606 505bafeafb66b0083ce1fca8eec2d061f1a5ebb7
push id101991
push userbmo:tim.xie@mail.utoronto.ca
push dateFri, 09 Mar 2018 08:02:22 +0000
reviewersnchevobbe
bugs1415211
milestone60.0a1
Bug 1415211 - Realigned XHR label, set property margin-inline-start of XHR to 0; r=nchevobbe MozReview-Commit-ID: 3K2jqmr5OCJ
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
@@ -285,19 +285,19 @@ a {
 
 .message[category=network] .xhr,
 .message.network .xhr {
   background-color: var(--theme-body-color-alt);
   color: var(--theme-body-background);
   border-radius: 3px;
   font-weight: bold;
   font-size: 10px;
-  padding: 2px;
+  padding: 1px 2px;
   line-height: 10px;
-  margin-inline-start: 3px;
+  margin-inline-start: 0;
   margin-inline-end: 1ex;
 }
 
 /* CSS styles */
 .webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
   background-image: linear-gradient(#2DC3F3, #00B6F0);
   border-color: #1BA2CC;
 }
@@ -605,20 +605,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: 0.1em;
 }
 
 /*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});