diff --git a/devtools/client/debugger/images/moz.build b/devtools/client/debugger/images/moz.build index bc6f2d406dd5..7e1a04f2425e 100644 --- a/devtools/client/debugger/images/moz.build +++ b/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', diff --git a/devtools/client/debugger/images/webconsole-logpoint.svg b/devtools/client/debugger/images/webconsole-logpoint.svg new file mode 100644 index 000000000000..ac9f8b6ef264 --- /dev/null +++ b/devtools/client/debugger/images/webconsole-logpoint.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/locales/en-US/webconsole.properties b/devtools/client/locales/en-US/webconsole.properties index 23148caaeed8..215b6784a32f 100644 --- a/devtools/client/locales/en-US/webconsole.properties +++ b/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 diff --git a/devtools/client/themes/webconsole.css b/devtools/client/themes/webconsole.css index a00151176023..58b9271f7e94 100644 --- a/devtools/client/themes/webconsole.css +++ b/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 diff --git a/devtools/client/webconsole/components/Message.js b/devtools/client/webconsole/components/Message.js index 09551c777c0e..45a835434ee1 100644 --- a/devtools/client/webconsole/components/Message.js +++ b/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, }); } diff --git a/devtools/client/webconsole/components/MessageIcon.js b/devtools/client/webconsole/components/MessageIcon.js index 4e40b24e0ac8..6ec98ed0bdcb 100644 --- a/devtools/client/webconsole/components/MessageIcon.js +++ b/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; diff --git a/devtools/client/webconsole/test/components/message-icon.test.js b/devtools/client/webconsole/test/components/message-icon.test.js index 1788db1b8a5e..4d9624809a1d 100644 --- a/devtools/client/webconsole/test/components/message-icon.test.js +++ b/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); + }); });