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
--- 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;