Bug 1547334 - Show logpoint icon in webconsole r=Harald
authorDavid Walsh <dwalsh@mozilla.com>
Wed, 08 May 2019 19:49:16 +0000
changeset 532070 804d239e671bc7572641c0c864fa7a147c338b3e
parent 532069 44f3132aaed8ac51661a9cf5ba53b5c949f6d6b3
child 532071 8fea661662875f667e79d9204438ce3cbfacbb46
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHarald
bugs1547334
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1547334 - Show logpoint icon in webconsole r=Harald Differential Revision: https://phabricator.services.mozilla.com/D29040
devtools/client/debugger/images/moz.build
devtools/client/debugger/images/webconsole-logpoint.svg
devtools/client/locales/en-US/webconsole.properties
devtools/client/themes/webconsole.css
devtools/client/webconsole/components/Message.js
devtools/client/webconsole/components/MessageIcon.js
devtools/client/webconsole/test/components/message-icon.test.js
--- a/devtools/client/debugger/images/moz.build
+++ b/devtools/client/debugger/images/moz.build
@@ -40,12 +40,13 @@ DevToolsModules(
     'reload.svg',
     'resume.svg',
     'rewind.svg',
     'search.svg',
     'stepIn.svg',
     'stepOut.svg',
     'stepOver.svg',
     'tab.svg',
+    'webconsole-logpoint.svg',
     'whole-word-match.svg',
     'window.svg',
     'worker.svg',
 )
new file mode 100644
--- /dev/null
+++ b/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>
--- a/devtools/client/locales/en-US/webconsole.properties
+++ b/devtools/client/locales/en-US/webconsole.properties
@@ -126,16 +126,20 @@ table.value=Values
 # LOCALIZATION NOTE (level.error, level.warn, level.info, level.log, level.debug):
 # tooltip for icons next to console output
 level.error=Error
 level.warn=Warning
 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
 
 # LOCALIZATION NOTE (webconsole.close.key)
 # Key shortcut used to close the Browser console (doesn't work in regular web console)
 webconsole.close.key=CmdOrCtrl+W
 
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -228,16 +228,21 @@ a {
 }
 
 .message:hover > .icon.rewindable {
   background-image: url(chrome://devtools/skin/images/next-circle.svg);
   cursor: pointer;
   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
  * because we want to jump forward.
  */
 .message.paused ~ .message:hover .icon.rewindable {
   transform: none;
 }
--- a/devtools/client/webconsole/components/Message.js
+++ b/devtools/client/webconsole/components/Message.js
@@ -139,27 +139,29 @@ class Message extends Component {
 
   renderIcon() {
     const {
       level,
       messageId,
       executionPoint,
       serviceContainer,
       inWarningGroup,
+      type,
     } = this.props;
 
     if (inWarningGroup) {
       return undefined;
     }
 
     return MessageIcon({
       level,
       onRewindClick: (serviceContainer.canRewind() && executionPoint)
         ? () => serviceContainer.jumpToExecutionPoint(executionPoint, messageId)
         : null,
+      type,
     });
   }
 
   render() {
     const {
       open,
       collapsible,
       collapseTitle,
--- a/devtools/client/webconsole/components/MessageIcon.js
+++ b/devtools/client/webconsole/components/MessageIcon.js
@@ -20,40 +20,52 @@ const l10nLevels = {
 
 // Store common icons so they can be used without recreating the element
 // during render.
 const CONSTANT_ICONS = Object.entries(l10nLevels).reduce((acc, [key, l10nLabel]) => {
   acc[key] = getIconElement(l10nLabel);
   return acc;
 }, {});
 
-function getIconElement(level, onRewindClick) {
+function getIconElement(level, onRewindClick, type) {
   let title = l10n.getStr(l10nLevels[level] || level);
   const classnames = ["icon"];
 
   if (onRewindClick) {
     title = l10n.getFormatStr("webconsole.jumpButton.tooltip", [title]);
     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;
+
+  if (onRewindClick) {
+    return getIconElement(level, onRewindClick, type);
+  }
 
-  return onRewindClick
-    ? getIconElement(level, onRewindClick)
-    : CONSTANT_ICONS[level] || getIconElement(level);
+  if (type) {
+    return getIconElement(level, null, type);
+  }
+
+  return CONSTANT_ICONS[level] || getIconElement(level);
 }
 
 module.exports = MessageIcon;
--- a/devtools/client/webconsole/test/components/message-icon.test.js
+++ b/devtools/client/webconsole/test/components/message-icon.test.js
@@ -13,9 +13,17 @@ const MessageIcon = createFactory(requir
 
 describe("MessageIcon component:", () => {
   it("renders icon based on level", () => {
     const rendered = render(MessageIcon({ level: MESSAGE_LEVEL.ERROR }));
     expect(rendered.hasClass("icon")).toBe(true);
     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);
+  });
 });