Bug 1478563 - Re-use function objects in MeatballMenu; r=jdescottes
To avoid needless re-renders due to props changing object identity.
Differential Revision:
https://phabricator.services.mozilla.com/D2641
--- a/devtools/client/framework/components/MeatballMenu.js
+++ b/devtools/client/framework/components/MeatballMenu.js
@@ -12,16 +12,28 @@ const MenuItem = createFactory(
const MenuList = createFactory(
require("devtools/client/shared/components/menu/MenuList")
);
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const { hr } = dom;
const { openDocLink } = require("devtools/client/shared/link");
const { assert } = require("devtools/shared/DevToolsUtils");
+const openDevToolsDocsLink = () => {
+ openDocLink(
+ "https://developer.mozilla.org/docs/Tools?utm_source=devtools&utm_medium=tabbar-menu"
+ );
+};
+
+const openCommunityLink = () => {
+ openDocLink(
+ "https://discourse.mozilla.org/c/devtools?utm_source=devtools&utm_medium=tabbar-menu"
+ );
+};
+
class MeatballMenu extends PureComponent {
static get propTypes() {
return {
// The id of the currently selected tool, e.g. "inspector"
currentToolId: PropTypes.string,
// List of possible docking options.
hostTypes: PropTypes.arrayOf(
@@ -120,17 +132,17 @@ class MeatballMenu extends PureComponent
break;
}
items.push(
MenuItem({
id: `toolbox-meatball-menu-dock-${hostType.position}`,
key: `dock-${hostType.position}`,
label: this.props.L10N.getStr(l10nkey),
- onClick: () => hostType.switchHost(),
+ onClick: hostType.switchHost,
checked: hostType.position === this.props.currentHostType,
className: "iconic",
})
);
}
if (items.length) {
items.push(hr({ key: "dock-separator" }));
@@ -175,50 +187,42 @@ class MeatballMenu extends PureComponent
// Settings
items.push(
MenuItem({
id: "toolbox-meatball-menu-settings",
key: "settings",
label: this.props.L10N.getStr("toolbox.meatballMenu.settings.label"),
accelerator: this.props.L10N.getStr("toolbox.help.key"),
- onClick: () => this.props.toggleOptions(),
+ onClick: this.props.toggleOptions,
className: "iconic",
})
);
items.push(hr({ key: "docs-separator" }));
// Getting started
items.push(
MenuItem({
id: "toolbox-meatball-menu-documentation",
key: "documentation",
label: this.props.L10N.getStr(
"toolbox.meatballMenu.documentation.label"
),
- onClick: () => {
- openDocLink(
- "https://developer.mozilla.org/docs/Tools?utm_source=devtools&utm_medium=tabbar-menu"
- );
- },
+ onClick: openDevToolsDocsLink,
})
);
// Give feedback
items.push(
MenuItem({
id: "toolbox-meatball-menu-community",
key: "community",
label: this.props.L10N.getStr("toolbox.meatballMenu.community.label"),
- onClick: () => {
- openDocLink(
- "https://discourse.mozilla.org/c/devtools?utm_source=devtools&utm_medium=tabbar-menu"
- );
- },
+ onClick: openCommunityLink,
})
);
return MenuList({ id: "toolbox-meatball-menu" }, items);
}
}
module.exports = MeatballMenu;