Bug 1363768 - Prevent creating constant elements during render;r=nchevobbe
MozReview-Commit-ID: IPWczrp1TOA
--- a/devtools/client/webconsole/new-console-output/components/message-icon.js
+++ b/devtools/client/webconsole/new-console-output/components/message-icon.js
@@ -8,25 +8,35 @@
// React & Redux
const {
DOM: dom,
PropTypes
} = require("devtools/client/shared/vendor/react");
const {l10n} = require("devtools/client/webconsole/new-console-output/utils/messages");
+// 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"),
+};
+
+function getIconElement(level) {
+ return dom.span({
+ className: "icon",
+ title: l10n.getStr(level),
+ });
+}
+
MessageIcon.displayName = "MessageIcon";
-
MessageIcon.propTypes = {
level: PropTypes.string.isRequired,
};
-
function MessageIcon(props) {
const { level } = props;
-
- const title = l10n.getStr("level." + level);
- return dom.span({
- className: "icon",
- title
- });
+ return CONSTANT_ICONS[level] || getIconElement(level);
}
module.exports = MessageIcon;
--- a/devtools/client/webconsole/new-console-output/components/message-indent.js
+++ b/devtools/client/webconsole/new-console-output/components/message-indent.js
@@ -8,20 +8,28 @@
// React & Redux
const {
DOM: dom,
} = require("devtools/client/shared/vendor/react");
const INDENT_WIDTH = 12;
-function MessageIndent(props) {
- const { indent } = props;
+// Store common indents so they can be used without recreating the element
+// during render.
+const CONSTANT_INDENTS = [getIndentElement(0), getIndentElement(1)];
+
+function getIndentElement(indent) {
return dom.span({
className: "indent",
style: {"width": indent * INDENT_WIDTH}
});
}
+function MessageIndent(props) {
+ const { indent } = props;
+ return CONSTANT_INDENTS[indent] || getIndentElement(indent);
+}
+
module.exports.MessageIndent = MessageIndent;
// Exported so we can test it with unit tests.
module.exports.INDENT_WIDTH = INDENT_WIDTH;
--- a/devtools/client/webconsole/new-console-output/components/message-repeat.js
+++ b/devtools/client/webconsole/new-console-output/components/message-repeat.js
@@ -19,20 +19,15 @@ const messageRepeatsTooltip = l10n.getSt
MessageRepeat.displayName = "MessageRepeat";
MessageRepeat.propTypes = {
repeat: PropTypes.number.isRequired
};
function MessageRepeat(props) {
const { repeat } = props;
-
- if (!repeat || repeat < 2) {
- return null;
- }
-
return dom.span({
className: "message-repeats",
title: PluralForm.get(repeat, messageRepeatsTooltip).replace("#1", repeat)
}, repeat);
}
module.exports = MessageRepeat;
--- a/devtools/client/webconsole/new-console-output/components/message.js
+++ b/devtools/client/webconsole/new-console-output/components/message.js
@@ -186,17 +186,18 @@ const Message = createClass({
? serviceContainer.sourceMapService
: undefined
}) : null
)));
} else {
notesNodes = [];
}
- const repeat = MessageRepeat({repeat: this.props.repeat});
+ const repeat = this.props.repeat && this.props.repeat > 1 ?
+ MessageRepeat({repeat: this.props.repeat}) : null;
let onFrameClick;
if (serviceContainer && frame) {
if (source === MESSAGE_SOURCE.CSS) {
onFrameClick = serviceContainer.onViewSourceInStyleEditor;
} else if (/^Scratchpad\/\d+$/.test(frame.source)) {
onFrameClick = serviceContainer.onViewSourceInScratchpad;
} else {
--- a/devtools/client/webconsole/new-console-output/test/components/message-repeat.test.js
+++ b/devtools/client/webconsole/new-console-output/test/components/message-repeat.test.js
@@ -11,13 +11,9 @@ const {
} = require("devtools/client/webconsole/new-console-output/test/helpers");
describe("MessageRepeat component:", () => {
it("renders repeated value correctly", () => {
const rendered = renderComponent(MessageRepeat, { repeat: 99 });
expect(rendered.classList.contains("message-repeats")).toBe(true);
expect(rendered.textContent).toBe("99");
});
-
- it("does not render un-repeated value", () => {
- expect(MessageRepeat({ repeat: 1 })).toBe(null);
- });
});