Bug 1488721 - Prevent closing the popup menu by clicking the element excepting the button on tootip popup. r?birtles draft
authorMantaroh Yoshinaga <mantaroh@gmail.com>
Thu, 18 Oct 2018 10:18:46 +0900
changeset 1729955 9fee8bc9ee224e599494e086c4d84cd996a1872c
parent 1729936 bfd23ad81ef4074f395036cc62fa31ff3cd97f96
child 1729956 a5f6838976a39be5001e3f917031f3545bedf46c
push id307720
push usermantaroh@gmail.com
push dateThu, 18 Oct 2018 01:19:30 +0000
treeherdertry@a5f6838976a3 [default view] [failures only]
reviewersbirtles
bugs1488721
milestone64.0a1
Bug 1488721 - Prevent closing the popup menu by clicking the element excepting the button on tootip popup. r?birtles
devtools/client/framework/components/MeatballMenu.js
devtools/client/shared/components/menu/MenuList.js
--- a/devtools/client/framework/components/MeatballMenu.js
+++ b/devtools/client/framework/components/MeatballMenu.js
@@ -72,16 +72,26 @@ class MeatballMenu extends PureComponent
       L10N: PropTypes.object.isRequired,
 
       // Callback function that will be invoked any time the component contents
       // update in such a way that its bounding box might change.
       onResize: PropTypes.func,
     };
   }
 
+  constructor(props) {
+    super(props);
+
+    // If clicking the menu list div element, the click event handler of
+    // the MenuButton will close the popup menu. This code prevent to it.
+    this.preventClickHandler = evt => {
+      evt.preventDefault();
+    }
+  }
+
   componentDidUpdate(prevProps) {
     if (!this.props.onResize) {
       return;
     }
 
     // We are only expecting the following kinds of dynamic changes when a popup
     // is showing:
     //
@@ -141,17 +151,20 @@ class MeatballMenu extends PureComponent
           onClick: hostType.switchHost,
           checked: hostType.position === this.props.currentHostType,
           className: "iconic",
         })
       );
     }
 
     if (items.length) {
-      items.push(hr({ key: "dock-separator" }));
+      items.push(hr({
+        key: "dock-separator",
+        onClick: this.preventClickHandler,
+      }));
     }
 
     // Split console
     if (this.props.currentToolId !== "webconsole") {
       const l10nkey = this.props.isSplitConsoleActive
         ? "toolbox.meatballMenu.hideconsole.label"
         : "toolbox.meatballMenu.splitconsole.label";
       items.push(
@@ -193,17 +206,20 @@ class MeatballMenu extends PureComponent
         key: "settings",
         label: this.props.L10N.getStr("toolbox.meatballMenu.settings.label"),
         accelerator: this.props.L10N.getStr("toolbox.help.key"),
         onClick: this.props.toggleOptions,
         className: "iconic",
       })
     );
 
-    items.push(hr({ key: "docs-separator" }));
+    items.push(hr({
+      key: "docs-separator",
+      onClick: this.preventClickHandler,
+    }));
 
     // Getting started
     items.push(
       MenuItem({
         id: "toolbox-meatball-menu-documentation",
         key: "documentation",
         label: this.props.L10N.getStr(
           "toolbox.meatballMenu.documentation.label"
--- a/devtools/client/shared/components/menu/MenuList.js
+++ b/devtools/client/shared/components/menu/MenuList.js
@@ -31,16 +31,17 @@ class MenuList extends PureComponent {
       onHighlightedChildChange: PropTypes.func,
     };
   }
 
   constructor(props) {
     super(props);
 
     this.onKeyDown = this.onKeyDown.bind(this);
+    this.onClick = this.onClick.bind(this);
     this.onMouseOverOrFocus = this.onMouseOverOrFocus.bind(this);
     this.onMouseOutOrBlur = this.onMouseOutOrBlur.bind(this);
     this.notifyHighlightedChildChange = this.notifyHighlightedChildChange.bind(this);
 
     this.setWrapperRef = element => {
       this.wrapperRef = element;
     };
   }
@@ -118,25 +119,34 @@ class MenuList extends PureComponent {
             tabList[tabList.length - 1].focus();
             e.preventDefault();
           }
         }
         break;
     }
   }
 
+  onClick(evt) {
+    if (this.wrapperRef && this.wrapperRef.id === evt.target.id) {
+      // If clicking the menu list div element, the click event handler of
+      // the MenuButton will close the popup menu. This code prevent to it.
+      evt.preventDefault();
+    }
+  }
+
   render() {
     const attr = {
       role: "menu",
       ref: this.setWrapperRef,
       onKeyDown: this.onKeyDown,
       onMouseOver: this.onMouseOverOrFocus,
       onMouseOut: this.onMouseOutOrBlur,
       onFocus: this.onMouseOverOrFocus,
-      onBlur: this.onMouseOutOrBlur
+      onBlur: this.onMouseOutOrBlur,
+      onClick: this.onClick,
     };
 
     if (this.props.id) {
       attr.id = this.props.id;
     }
 
     // Add padding for checkbox image if necessary.
     let hasCheckbox = false;