Add a MessageIcon component. Fixes mozilla#52 (mozilla#70)

* Fix nits. r=linclark
nchevobbe · Apr 20, 2016 · 0571f48 · 0571f48
1 parent d064994
commit 0571f48
Show file tree

Hide file tree

Showing 11 changed files with 100 additions and 7 deletions.
diff --git a/devtools/client/webconsole/new-console-output/components/message-icon.js b/devtools/client/webconsole/new-console-output/components/message-icon.js
@@ -0,0 +1,32 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// React & Redux
+const {
+  DOM: dom,
+  PropTypes
+} = require("devtools/client/shared/vendor/react");
+const {l10n} = require("devtools/client/webconsole/new-console-output/utils/messages");
+
+MessageIcon.displayName = "MessageIcon";
+
+MessageIcon.propTypes = {
+  severity: PropTypes.string.isRequired,
+};
+
+function MessageIcon(props) {
+  const { severity } = props;
+
+  const title = l10n.getStr("severity." + severity);
+  return dom.div({
+    className: "icon",
+    title
+  });
+}
+
+module.exports.MessageIcon = MessageIcon;
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
@@ -13,6 +13,7 @@ const {
   PropTypes
 } = require("devtools/client/shared/vendor/react");
 const { MessageRepeat } = require("devtools/client/webconsole/new-console-output/components/message-repeat");
+const { MessageIcon } = require("devtools/client/webconsole/new-console-output/components/message-icon");
 
 ConsoleApiCall.displayName = "ConsoleApiCall";
 
@@ -25,6 +26,7 @@ function ConsoleApiCall(props) {
   const messageBody =
     dom.span({className: "message-body devtools-monospace"},
       formatTextContent(message.data.arguments));
+  const icon = createElement(MessageIcon, {severity: message.severity});
   const repeat = createElement(MessageRepeat, {repeat: message.repeat});
   const children = [
     messageBody,
@@ -40,6 +42,7 @@ function ConsoleApiCall(props) {
     category: message.category,
     severity: message.severity
   },
+    icon,
     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
@@ -8,12 +8,14 @@
 
 // React & Redux
 const {
+  createElement,
   createFactory,
   DOM: dom,
   PropTypes
 } = require("devtools/client/shared/vendor/react");
 
 const VariablesViewLink = createFactory(require("devtools/client/webconsole/new-console-output/components/variables-view-link").VariablesViewLink);
+const { MessageIcon } = require("devtools/client/webconsole/new-console-output/components/message-icon");
 
 DatePreview.displayName = "DatePreview";
 
@@ -22,7 +24,7 @@ DatePreview.propTypes = {
 };
 
 function DatePreview(props) {
-  const { data } = props;
+  const { data, category, severity } = props;
   const { preview } = data;
 
   const dateString = new Date(preview.timestamp).toISOString();
@@ -33,16 +35,18 @@ function DatePreview(props) {
     }),
     dom.span({ className: "cm-string-2" }, ` ${dateString}`)
   ];
+  const icon = createElement(MessageIcon, { severity });
 
   // @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
+    category: category,
+    severity: severity
   },
+    icon,
     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
@@ -8,22 +8,28 @@
 
 // React & Redux
 const {
+  createElement,
   DOM: dom,
 } = require("devtools/client/shared/vendor/react");
+const { MessageIcon } = require("devtools/client/webconsole/new-console-output/components/message-icon");
 
 DefaultRenderer.displayName = "DefaultRenderer";
 
 function DefaultRenderer(props) {
-  const { data } = props;
+  const { category, severity } = props;
+
+  const icon = createElement(MessageIcon, { severity });
+
   // @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
+    category: category,
+    severity: severity
   },
+    icon,
     "This evaluation result type is not supported yet."
   );
 }

diff --git a/devtools/client/webconsole/new-console-output/components/message-types/evaluation-result.js b/devtools/client/webconsole/new-console-output/components/message-types/evaluation-result.js
@@ -23,7 +23,12 @@ EvaluationResult.propTypes = {
 function EvaluationResult(props) {
   const { message } = props;
   let PreviewComponent = getPreviewComponent(message.data);
-  return createElement(PreviewComponent, { data: message.data });
+
+  return createElement(PreviewComponent, {
+    data: message.data,
+    category: message.category,
+    severity: message.severity
+  });
 }
 
 function getPreviewComponent(data) {

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
@@ -13,6 +13,7 @@ const {
   PropTypes
 } = require("devtools/client/shared/vendor/react");
 const { MessageRepeat } = require("devtools/client/webconsole/new-console-output/components/message-repeat");
+const { MessageIcon } = require("devtools/client/webconsole/new-console-output/components/message-icon");
 
 PageError.displayName = "PageError";
 
@@ -26,6 +27,7 @@ function PageError(props) {
     dom.span({className: "message-body devtools-monospace"},
       message.data.errorMessage);
   const repeat = createElement(MessageRepeat, {repeat: message.repeat});
+  const icon = createElement(MessageIcon, {severity: message.severity});
   const children = [
     messageBody,
     repeat
@@ -40,6 +42,7 @@ function PageError(props) {
     category: message.category,
     severity: message.severity
   },
+    icon,
     dom.span({className: "message-body-wrapper"},
       dom.span({},
         dom.span({className: "message-flex-body"},

diff --git a/devtools/client/webconsole/new-console-output/components/moz.build b/devtools/client/webconsole/new-console-output/components/moz.build
@@ -10,6 +10,7 @@ DIRS += [
 DevToolsModules(
     'console-output.js',
     'message-container.js',
+    'message-icon.js',
     'message-repeat.js',
     'variables-view-link.js'
 )
diff --git a/devtools/client/webconsole/new-console-output/test/components/chrome.ini b/devtools/client/webconsole/new-console-output/test/components/chrome.ini
@@ -7,6 +7,7 @@ support-files =
 [test_console-api-call_repeat.html]
 [test_date-preview.html]
 [test_evaluation-result.html]
+[test_message-icon.html]
 [test_message-container.html]
 [test_message-repeat.html]
 [test_page-error.html]
diff --git a/devtools/client/webconsole/new-console-output/test/components/test_date-preview.html b/devtools/client/webconsole/new-console-output/test/components/test_date-preview.html
@@ -21,6 +21,8 @@
   const message = prepareMessage(packet);
   const props = {
     data: message.data,
+    severity: message.severity,
+    category: message.category,
   };
   const rendered = renderComponent(DatePreview, props);
 

diff --git a/devtools/client/webconsole/new-console-output/test/components/test_message-icon.html b/devtools/client/webconsole/new-console-output/test/components/test_message-icon.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<head>
+  <meta charset="utf8">
+  <title>Test for MessageRepeat component</title>
+  <script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="application/javascript;version=1.8" src="head.js"></script>
+  <!-- Any copyright is dedicated to the Public Domain.
+     - http://creativecommons.org/publicdomain/zero/1.0/ -->
+</head>
+<body>
+<p>Test for MessageIcon component</p>
+
+<script type="text/javascript;version=1.8">
+window.onload = Task.async(function* () {
+  const {
+    SEVERITY_CLASS_FRAGMENTS,
+    SEVERITY_ERROR,
+  } = require("devtools/client/webconsole/new-console-output/constants");
+  const { MessageIcon } = require("devtools/client/webconsole/new-console-output/components/message-icon");
+
+  let severity = SEVERITY_CLASS_FRAGMENTS[SEVERITY_ERROR];
+  const iconRendered = renderComponent(MessageIcon, { severity });
+  ok(iconRendered.classList.contains("icon"), "MessageIcon has expected class");
+  is(iconRendered.getAttribute("title"), "Error",
+    "MessageIcon shows correct title attribute");
+
+  SimpleTest.finish();
+});
+</script>
+</body>
+</html>
diff --git a/devtools/client/webconsole/new-console-output/utils/messages.js b/devtools/client/webconsole/new-console-output/utils/messages.js
@@ -19,6 +19,8 @@ const {
   SEVERITY_LOG,
 } = require("../constants");
 const WebConsoleUtils = require("devtools/shared/webconsole/utils").Utils;
+const STRINGS_URI = "chrome://devtools/locale/webconsole.properties";
+const l10n = new WebConsoleUtils.L10n(STRINGS_URI);
 
 function prepareMessage(packet) {
   // @TODO turn this into an Immutable Record.
@@ -88,3 +90,5 @@ function getRepeatId(message) {
 exports.prepareMessage = prepareMessage;
 // Export for use in testing.
 exports.getRepeatId = getRepeatId;
+
+exports.l10n = l10n;