Bug 1547334 - Show logpoint icon in webconsole r=Harald

Differential Revision: https://phabricator.services.mozilla.com/D29040

--HG--
extra : moz-landing-system : lando

devtools/client/debugger/images/moz.build

@@ -45,6 +45,7 @@ DevToolsModules(
     'stepOut.svg',
     'stepOver.svg',
     'tab.svg',
+    'webconsole-logpoint.svg',
     'whole-word-match.svg',
     'window.svg',
     'worker.svg',

devtools/client/debugger/images/webconsole-logpoint.svg

@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12">
+  <path fill="context-fill" fill-opacity=".2" stroke="context-fill" stroke-linejoin="round" d="M.5 9V3c0-.83.67-1.5 1.5-1.5h5.05a.5.5 0 0 1 .38.17L11.33 6l-3.9 4.33a.5.5 0 0 1-.38.17H2A1.5 1.5 0 0 1 .5 9z"/>
+</svg>

devtools/client/locales/en-US/webconsole.properties

@@ -131,6 +131,10 @@ level.info=Info
 level.log=Log
 level.debug=Debug
 
+# LOCALIZATION NOTE (logpoint.title)
+# Tooltip shown for logpoints sent from the debugger
+logpoint.title=Logpoints from the debugger
+
 # LOCALIZATION NOTE (webconsole.find.key)
 # Key shortcut used to focus the search box on upper right of the console
 webconsole.find.key=CmdOrCtrl+F

devtools/client/themes/webconsole.css

@@ -233,6 +233,11 @@ a {
   transform: rotate(180deg);
 }
 
+.message > .icon.logpoint {
+  background-image: url(resource://devtools/client/debugger/images/webconsole-logpoint.svg);
+  color: var(--theme-graphs-purple);
+}
+
 /*
  * we flip the next.svg icon by default because when we're
  * not paused, we would jump back. We remove the transform here

devtools/client/webconsole/components/Message.js

@@ -144,6 +144,7 @@ class Message extends Component {
       executionPoint,
       serviceContainer,
       inWarningGroup,
+      type,
     } = this.props;
 
     if (inWarningGroup) {
@@ -155,6 +156,7 @@ class Message extends Component {
       onRewindClick: (serviceContainer.canRewind() && executionPoint)
         ? () => serviceContainer.jumpToExecutionPoint(executionPoint, messageId)
         : null,
+      type,
     });
   }
 

devtools/client/webconsole/components/MessageIcon.js

@@ -25,7 +25,7 @@ const CONSTANT_ICONS = Object.entries(l10nLevels).reduce((acc, [key, l10nLabel])
   return acc;
 }, {});
 
-function getIconElement(level, onRewindClick) {
+function getIconElement(level, onRewindClick, type) {
   let title = l10n.getStr(l10nLevels[level] || level);
   const classnames = ["icon"];
 
@@ -34,26 +34,38 @@ function getIconElement(level, onRewindClick) {
     classnames.push("rewindable");
   }
 
-  return dom.span({
+  if (type && type === "logPoint") {
+    title = l10n.getStr("logpoint.title");
+    classnames.push("logpoint");
+  }
+
+  { return dom.span({
     className: classnames.join(" "),
     onClick: onRewindClick,
     title,
     "aria-live": "off",
-  });
+  }); }
 }
 
 MessageIcon.displayName = "MessageIcon";
 MessageIcon.propTypes = {
   level: PropTypes.string.isRequired,
   onRewindClick: PropTypes.function,
+  type: PropTypes.string,
 };
 
 function MessageIcon(props) {
-  const { level, onRewindClick } = props;
+  const { level, onRewindClick, type } = props;
 
-  return onRewindClick
-    ? getIconElement(level, onRewindClick)
-    : CONSTANT_ICONS[level] || getIconElement(level);
+  if (onRewindClick) {
+    return getIconElement(level, onRewindClick, type);
+  }
+
+  if (type) {
+    return getIconElement(level, null, type);
+  }
+
+  return CONSTANT_ICONS[level] || getIconElement(level);
 }
 
 module.exports = MessageIcon;

devtools/client/webconsole/test/components/message-icon.test.js

@@ -18,4 +18,12 @@ describe("MessageIcon component:", () => {
     expect(rendered.attr("title")).toBe("Error");
     expect(rendered.attr("aria-live")).toBe("off");
   });
+
+  it("renders logpoint items", () => {
+    const rendered = render(MessageIcon({
+      level: MESSAGE_LEVEL.LOG,
+      type: "logPoint",
+    }));
+    expect(rendered.hasClass("logpoint")).toBe(true);
+  });
 });