Bug 1498531 - Localize Webconsole WebReplay Jump icon; r=loganfsmyth,Honza.
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Mon, 22 Oct 2018 05:26:33 +0000
changeset 490627 aa628ce24d80d9966a0bcdfce6bc0469da509c34
parent 490626 802c67d2fc6d7a4a5cf2acf25a29c4f7ebde1c93
child 490628 43d78c2bd006d7cf7d90508519c8aa88be18ab0c
child 490663 9a3a43e8743da65561b9ba4aa1f47777b6a61528
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewersloganfsmyth, Honza
bugs1498531
milestone64.0a1
Bug 1498531 - Localize Webconsole WebReplay Jump icon; r=loganfsmyth,Honza. This patch adds localization for the WebReplay Jump icon, and uses the same terminology as the one used in the context menu that triggers the same action. The Jump button was used in-place of the existing level icons (Error, Warning, …), and was only displayed when the message was hovered. We now ensure the level icon is always visible and that we only show the Jump icon when the message is hovered. Finally, the button was styled targeting the title attribute in CSS, which seemed a little brittle. We now use a dedicated class which should be safer and more future proof. Differential Revision: https://phabricator.services.mozilla.com/D8533
devtools/client/locales/en-US/webconsole.properties
devtools/client/themes/webconsole.css
devtools/client/webconsole/components/Message.js
devtools/client/webconsole/components/MessageIcon.js
--- a/devtools/client/locales/en-US/webconsole.properties
+++ b/devtools/client/locales/en-US/webconsole.properties
@@ -192,16 +192,24 @@ webconsole.menu.selectAll.accesskey=A
 webconsole.menu.openInSidebar.label=Open in sidebar
 webconsole.menu.openInSidebar.accesskey=V
 
 # LOCALIZATION NOTE (webconsole.menu.timeWarp.label)
 # Label used for a context-menu item displayed for any log. Clicking on it will
 # jump to the execution point where the log item was generated.
 webconsole.menu.timeWarp.label=Jump here
 
+# LOCALIZATION NOTE (webconsole.jumpButton.tooltip)
+# Label used for the tooltip on the "jump" button in the console. It's displayed when
+# the user recorded execution with WebReplay, is now paused in the debugger, and hover a
+# message in the console output. Clicking on it will jump to the execution point where the
+# log item was generated.
+# Parameters: %S is the level of the message.
+webconsole.jumpButton.tooltip=%S - Jump here
+
 # LOCALIZATION NOTE (webconsole.clearButton.tooltip)
 # Label used for the tooltip on the clear logs button in the console top toolbar bar.
 # Clicking on it will clear the content of the console.
 webconsole.clearButton.tooltip=Clear the Web Console output
 
 # LOCALIZATION NOTE (webconsole.toggleFilterButton.tooltip)
 # Label used for the tooltip on the toggle filter bar button in the console top
 # toolbar bar. Clicking on it will toggle the visibility of an additional bar which
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -212,25 +212,20 @@ a {
 }
 
 .message.navigationMarker > .icon {
   color: var(--object-color);
   background-image: var(--theme-console-navigation-image);
 }
 
 
-.message > span.icon[title="Jump"] {
+.message:hover > .icon.rewindable {
   background-image:var(--theme-console-jump-image);
   background-size: 14px 14px;
   cursor: pointer;
-  opacity: 0;
-}
-
-.message:hover span.icon[title="Jump"] {
-  opacity: 1;
 }
 
 .message > .message-body-wrapper {
   flex: auto;
   min-width: 0px;
   margin: var(--console-output-vertical-padding) 0;
 }
 
--- a/devtools/client/webconsole/components/Message.js
+++ b/devtools/client/webconsole/components/Message.js
@@ -120,26 +120,22 @@ class Message extends Component {
     serviceContainer.openContextMenu(e, messageInfo);
     e.stopPropagation();
     e.preventDefault();
   }
 
   renderIcon() {
     const { level, messageId, executionPoint, serviceContainer } = this.props;
 
-    if (serviceContainer.canRewind()) {
-      return dom.span({
-        className: "icon",
-        title: "Jump",
-        "aria-live": "off",
-        onClick: () => serviceContainer.jumpToExecutionPoint(executionPoint, messageId),
-      });
-    }
-
-    return MessageIcon({ level });
+    return MessageIcon({
+      level,
+      onRewindClick: serviceContainer.canRewind()
+        ? () => serviceContainer.jumpToExecutionPoint(executionPoint, messageId)
+        : null,
+    });
   }
 
   render() {
     const {
       open,
       collapsible,
       collapseTitle,
       source,
--- a/devtools/client/webconsole/components/MessageIcon.js
+++ b/devtools/client/webconsole/components/MessageIcon.js
@@ -5,36 +5,55 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const {l10n} = require("devtools/client/webconsole/utils/messages");
 
+const l10nLevels = {
+  "error": "level.error",
+  "warn": "level.warn",
+  "info": "level.info",
+  "log": "level.log",
+  "debug": "level.debug",
+};
+
 // Store common icons so they can be used without recreating the element
 // during render.
-const CONSTANT_ICONS = {
-  "error": getIconElement("level.error"),
-  "warn": getIconElement("level.warn"),
-  "info": getIconElement("level.info"),
-  "log": getIconElement("level.log"),
-  "debug": getIconElement("level.debug"),
-};
+const CONSTANT_ICONS = Object.entries(l10nLevels).reduce((acc, [key, l10nLabel]) => {
+  acc[key] = getIconElement(l10nLabel);
+  return acc;
+}, {});
+
+function getIconElement(level, onRewindClick) {
+  let title = l10n.getStr(l10nLevels[level] || level);
+  const classnames = ["icon"];
 
-function getIconElement(level) {
+  if (onRewindClick) {
+    title = l10n.getFormatStr("webconsole.jumpButton.tooltip", [title]);
+    classnames.push("rewindable");
+  }
+
   return dom.span({
-    className: "icon",
-    title: l10n.getStr(level),
+    className: classnames.join(" "),
+    onClick: onRewindClick,
+    title,
     "aria-live": "off",
   });
 }
 
 MessageIcon.displayName = "MessageIcon";
 MessageIcon.propTypes = {
   level: PropTypes.string.isRequired,
+  onRewindClick: PropTypes.function,
 };
+
 function MessageIcon(props) {
-  const { level } = props;
-  return CONSTANT_ICONS[level] || getIconElement(level);
+  const { level, onRewindClick } = props;
+
+  return onRewindClick
+    ? getIconElement(level, onRewindClick)
+    : CONSTANT_ICONS[level] || getIconElement(level);
 }
 
 module.exports = MessageIcon;