Modify message component's root element to add category and severity …

…attributes (mozilla#64) * Add severity and category attributes for the other message components
nchevobbe · Apr 19, 2016 · d064994 · d064994
1 parent fd09dd8
commit d064994
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 4 deletions.
diff --git a/devtools/client/webconsole/new-console-output/components/message-types/console-api-call.js b/devtools/client/webconsole/new-console-output/components/message-types/console-api-call.js
@@ -31,7 +31,15 @@ function ConsoleApiCall(props) {
     repeat
   ];
 
-  return dom.div({ className: "message cm-s-mozilla" },
+  // @TODO Use of "is" is a temporary hack to get the category and severity
+  // attributes to be applied. There are targeted in webconsole's CSS rules,
+  // so if we remove this hack, we have to modify the CSS rules accordingly.
+  return dom.div({
+    class: "message cm-s-mozilla",
+    is: "fdt-message",
+    category: message.category,
+    severity: message.severity
+  },
     dom.span({className: "message-body-wrapper"},
       dom.span({},
         dom.span({className: "message-flex-body"},

diff --git a/devtools/client/webconsole/new-console-output/components/message-types/date-preview.js b/devtools/client/webconsole/new-console-output/components/message-types/date-preview.js
@@ -34,7 +34,15 @@ function DatePreview(props) {
     dom.span({ className: "cm-string-2" }, ` ${dateString}`)
   ];
 
-  return dom.div({ className: "message cm-s-mozilla" },
+  // @TODO Use of "is" is a temporary hack to get the category and severity
+  // attributes to be applied. There are targeted in webconsole's CSS rules,
+  // so if we remove this hack, we have to modify the CSS rules accordingly.
+  return dom.div({
+    class: "message cm-s-mozilla",
+    is: "fdt-message",
+    category: data.category,
+    severity: data.severity
+  },
     dom.span({
       className: "message-body-wrapper message-body devtools-monospace"
     }, dom.span({},

diff --git a/devtools/client/webconsole/new-console-output/components/message-types/default-renderer.js b/devtools/client/webconsole/new-console-output/components/message-types/default-renderer.js
@@ -14,7 +14,16 @@ const {
 DefaultRenderer.displayName = "DefaultRenderer";
 
 function DefaultRenderer(props) {
-  return dom.div({ className: "message cm-s-mozilla" },
+  const { data } = props;
+  // @TODO Use of "is" is a temporary hack to get the category and severity
+  // attributes to be applied. There are targeted in webconsole's CSS rules,
+  // so if we remove this hack, we have to modify the CSS rules accordingly.
+  return dom.div({
+    class: "message cm-s-mozilla",
+    is: "fdt-message",
+    category: data.category,
+    severity: data.severity
+  },
     "This evaluation result type is not supported yet."
   );
 }

diff --git a/devtools/client/webconsole/new-console-output/components/message-types/page-error.js b/devtools/client/webconsole/new-console-output/components/message-types/page-error.js
@@ -31,7 +31,15 @@ function PageError(props) {
     repeat
   ];
 
-  return dom.div({ className: "message cm-s-mozilla"},
+  // @TODO Use of "is" is a temporary hack to get the category and severity
+  // attributes to be applied. There are targeted in webconsole's CSS rules,
+  // so if we remove this hack, we have to modify the CSS rules accordingly.
+  return dom.div({
+    class: "message cm-s-mozilla",
+    is: "fdt-message",
+    category: message.category,
+    severity: message.severity
+  },
     dom.span({className: "message-body-wrapper"},
       dom.span({},
         dom.span({className: "message-flex-body"},