Bug 1478563 - Re-use function objects in MeatballMenu; r=jdescottes
authorBrian Birtles <birtles@gmail.com>
Thu, 02 Aug 2018 10:09:11 +0900
changeset 826228 d4ca2c8982afbcac4494d91b65cff5c64e59498a
parent 826227 2d0225ff21ff1238cf61e4a3c239dd89b7b7fc25
child 826229 d9baec9cf420acf68530b10bca19f67b72e3cb2b
push id118275
push userbmo:dharvey@mozilla.com
push dateFri, 03 Aug 2018 11:44:33 +0000
reviewersjdescottes
bugs1478563
milestone63.0a1
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
devtools/client/framework/components/MeatballMenu.js
--- 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;