Bug 1296389 - Part 1: Use the same markup structure as the old console frontend r=me

MozReview-Commit-ID: 2YVe8jtdJSe

--HG--
extra : rebase_source : b69393f61ddd2ecbcae7122e38e500fa1f6f8471

devtools/client/webconsole/new-console-output/components/message-types/console-api-call.js

@@ -45,6 +45,15 @@ function ConsoleApiCall(props) {
 
   const icon = MessageIcon({level});
   const repeat = MessageRepeat({repeat: message.repeat});
+  const shouldRenderFrame = frame && frame.source !== "debugger eval code";
+  const location = dom.span({ className: "message-location devtools-monospace" },
+    shouldRenderFrame ? FrameView({
+      frame,
+      onClick: onViewSourceInDebugger,
+      showEmptyPathAsHost: true,
+      sourceMapService
+    }) : null
+  );
 
   let collapse = "";
   let attachment = "";
@@ -83,7 +92,6 @@ function ConsoleApiCall(props) {
     classes.push("open");
   }
 
-  const shouldRenderFrame = frame && frame.source !== "debugger eval code";
   return dom.div({
     className: classes.join(" ")
   },
@@ -92,23 +100,14 @@ function ConsoleApiCall(props) {
     icon,
     collapse,
     dom.span({className: "message-body-wrapper"},
-      dom.span({},
-        dom.span({className: "message-flex-body"},
-          dom.span({className: "message-body devtools-monospace"},
-            messageBody
-          ),
-          repeat,
-          dom.span({ className: "message-location devtools-monospace" },
-            shouldRenderFrame ? FrameView({
-              frame,
-              onClick: onViewSourceInDebugger,
-              showEmptyPathAsHost: true,
-              sourceMapService
-            }) : null
-          )
+      dom.span({className: "message-flex-body"},
+        dom.span({className: "message-body devtools-monospace"},
+          messageBody
         ),
-        attachment
-      )
+        repeat,
+        location
+      ),
+      attachment
     )
   );
 }

devtools/client/webconsole/new-console-output/components/message-types/console-command.js

@@ -47,8 +47,12 @@ function ConsoleCommand(props) {
     // @TODO add timestamp
     // @TODO add indent if necessary
     icon,
-    dom.span({className: "message-body-wrapper message-body devtools-monospace"},
-      dom.span({}, message.messageText)
+    dom.span({ className: "message-body-wrapper" },
+      dom.span({ className: "message-flex-body" },
+        dom.span({ className: "message-body devtools-monospace" },
+          message.messageText
+        )
+      )
     )
   );
 }

devtools/client/webconsole/new-console-output/components/message-types/evaluation-result.js

@@ -42,10 +42,11 @@ function EvaluationResult(props) {
     // @TODO add timestamp
     // @TODO add indent if needed with console.group
     icon,
-    dom.span(
-      {className: "message-body-wrapper message-body devtools-monospace"},
-      dom.span({},
-        GripMessageBody({grip: message.parameters})
+    dom.span({ className: "message-body-wrapper" },
+      dom.span({ className: "message-flex-body" },
+        dom.span({ className: "message-body devtools-monospace" },
+          GripMessageBody({grip: message.parameters})
+        )
       )
     )
   );

devtools/client/webconsole/new-console-output/components/message-types/page-error.js

@@ -52,13 +52,14 @@ function PageError(props) {
     className: classes.join(" ")
   },
     icon,
-    dom.span(
-      {className: "message-body-wrapper message-body devtools-monospace"},
-      dom.span({},
-        message.messageText
+    dom.span({ className: "message-body-wrapper" },
+      dom.span({ className: "message-flex-body" },
+        dom.span({ className: "message-body devtools-monospace" },
+          message.messageText
+        ),
+        repeat
       )
-    ),
-    repeat
+    )
   );
 }
 

devtools/client/webconsole/new-console-output/test/components/evaluation-result.test.js

@@ -25,6 +25,6 @@ describe("EvaluationResult component:", () => {
 });
 
 function getMessageBody(rendered) {
-  const queryPath = "div.message.cm-s-mozilla span.message-body-wrapper.message-body.devtools-monospace";
+  const queryPath = "div.message span.message-body-wrapper span.message-body";
   return rendered.querySelector(queryPath);
 }

devtools/client/webconsole/new-console-output/test/components/page-error.test.js

@@ -23,6 +23,6 @@ describe("PageError component:", () => {
 });
 
 function getMessageBody(rendered) {
-  const queryPath = "div.message span.message-body-wrapper.message-body.devtools-monospace";
+  const queryPath = "div.message span.message-body-wrapper span.message-body";
   return rendered.querySelector(queryPath);
 }