From 741396403f0c002e7ce08b20da46046074ab3cc6 Mon Sep 17 00:00:00 2001
From: ryanml <rlanese@brave.com>
Date: Thu, 6 Aug 2020 01:51:46 -0700
Subject: [PATCH] Merge pull request #6327 from brave/fix-10199-2

Persists widget menus when they aren't in the foreground
---
 .../components/default/widget/index.tsx       | 21 ++++-----
 .../components/default/widget/styles.ts       | 46 ++++++++++++-------
 .../components/default/widget/widgetMenu.tsx  | 32 +++++++------
 .../containers/newTab/index.tsx               |  3 ++
 4 files changed, 59 insertions(+), 43 deletions(-)

diff --git a/components/brave_new_tab_ui/components/default/widget/index.tsx b/components/brave_new_tab_ui/components/default/widget/index.tsx
index f12762034580..4f5f4f394428 100644
--- a/components/brave_new_tab_ui/components/default/widget/index.tsx
+++ b/components/brave_new_tab_ui/components/default/widget/index.tsx
@@ -17,6 +17,7 @@ export interface WidgetProps {
   isCryptoTab?: boolean
   widgetTitle?: string
   hideMenu?: boolean
+  isForeground?: boolean
   onLearnMore?: () => void
   onDisconnect?: () => void
   onRefreshData?: () => void
@@ -31,19 +32,15 @@ const createWidget = <P extends object>(WrappedComponent: React.ComponentType<P>
     constructor (props: P & WidgetProps) {
       super(props)
       this.state = {
-        widgetMenuPersist: false
+        widgetMenuPersist: !!props.isForeground
       }
     }
 
-    toggleWidgetHover = () => {
-      this.setState({ widgetMenuPersist: !this.state.widgetMenuPersist })
-    }
-
-    persistWidgetHover = () => {
+    persistWidget = () => {
       this.setState({ widgetMenuPersist: true })
     }
 
-    unpersistWidgetHover = () => {
+    unpersistWidget = () => {
       this.setState({ widgetMenuPersist: false })
     }
 
@@ -57,6 +54,7 @@ const createWidget = <P extends object>(WrappedComponent: React.ComponentType<P>
         isCryptoTab,
         widgetTitle,
         hideMenu,
+        isForeground,
         onLearnMore,
         onDisconnect,
         onRefreshData
@@ -67,7 +65,6 @@ const createWidget = <P extends object>(WrappedComponent: React.ComponentType<P>
         <StyledWidgetContainer
           menuPosition={menuPosition}
           textDirection={textDirection}
-          onMouseLeave={this.unpersistWidgetHover}
         >
           <StyledWidget
             isCrypto={isCrypto}
@@ -75,7 +72,7 @@ const createWidget = <P extends object>(WrappedComponent: React.ComponentType<P>
             widgetMenuPersist={widgetMenuPersist}
             preventFocus={preventFocus}
           >
-              <WrappedComponent {...this.props as P}/>
+            <WrappedComponent {...this.props as P}/>
           </StyledWidget>
           {hideWidget && !hideMenu && !preventFocus &&
           <WidgetMenu
@@ -83,13 +80,13 @@ const createWidget = <P extends object>(WrappedComponent: React.ComponentType<P>
             onLearnMore={onLearnMore}
             onDisconnect={onDisconnect}
             onRefreshData={onRefreshData}
+            isForeground={isForeground}
             widgetMenuPersist={widgetMenuPersist}
-            toggleWidgetHover={this.toggleWidgetHover}
             textDirection={textDirection}
             menuPosition={menuPosition}
             hideWidget={hideWidget as HideWidgetFunction}
-            unpersistWidgetHover={this.unpersistWidgetHover}
-            onMouseEnter={this.persistWidgetHover}
+            persistWidget={this.persistWidget}
+            unpersistWidget={this.unpersistWidget}
           />
           }
         </StyledWidgetContainer>
diff --git a/components/brave_new_tab_ui/components/default/widget/styles.ts b/components/brave_new_tab_ui/components/default/widget/styles.ts
index a11c49f21582..c200c065bc36 100644
--- a/components/brave_new_tab_ui/components/default/widget/styles.ts
+++ b/components/brave_new_tab_ui/components/default/widget/styles.ts
@@ -23,23 +23,10 @@ export const StyledWidgetContainer = styled<WidgetContainerProps, 'div'>('div')`
   position: relative;
 `
 
-export const StyledWidgetMenuContainer = styled<WidgetVisibilityProps & WidgetPositionProps, 'div'>('div')`
-  visibility: hidden;
-  pointer-events: none;
+export const StyledWidgetMenuContainer = styled<{}, 'div'>('div')`
   position: absolute;
   top: 5px;
   right: 5px;
-
-  ${StyledWidgetContainer}:hover & {
-    visibility: visible;
-    pointer-events: auto;
-  }
-
-  // Also hover when menu button has been clicked
-  ${ p => p.widgetMenuPersist && `
-    visibility: visible;
-    pointer-events: auto;
-  `}
 `
 
 interface WidgetVisibilityProps {
@@ -47,6 +34,7 @@ interface WidgetVisibilityProps {
   preventFocus?: boolean
   isCrypto?: boolean
   isCryptoTab?: boolean
+  isForeground?: boolean
 }
 
 export const StyledWidget = styled<WidgetVisibilityProps, 'div'>('div')`
@@ -76,9 +64,10 @@ interface WidgetMenuProps {
   textDirection: string
 }
 
-export const StyledWidgetMenu = styled<WidgetMenuProps, 'div'>('div')`
+export const StyledWidgetMenu = styled<WidgetVisibilityProps & WidgetMenuProps, 'div'>('div')`
   position absolute;
-  width: 166px;
+  width: max-content;
+  min-width: 166px;
   padding: 8px 0;
   background-color: ${p => p.theme.color.contextMenuBackground};
   color:  ${p => p.theme.color.contextMenuForeground};
@@ -86,6 +75,13 @@ export const StyledWidgetMenu = styled<WidgetMenuProps, 'div'>('div')`
   border-radius: 4px;
   top: 48px;
   z-index: 4;
+  visibility: hidden;
+  pointer-events: none;
+
+  ${p => p.widgetMenuPersist && `
+    visibility: visible;
+    pointer-events: auto;
+  `}
 
   @media screen and (min-width: 1150px) {
     ${p => (p.menuPosition === 'right' && p.textDirection === 'ltr') || (p.menuPosition === 'left' && p.textDirection === 'rtl')
@@ -157,6 +153,21 @@ interface WidgetIconProps {
   isBinance?: boolean
 }
 
+export const StyledEllipsis = styled<WidgetVisibilityProps, 'div'>('div')`
+  visibility: hidden;
+  pointer-events: none;
+
+  ${p => (p.widgetMenuPersist || p.isForeground) && `
+    visibility: visible;
+    pointer-events: auto;
+  `}
+
+  ${StyledWidgetContainer}:hover & {
+    visibility: visible;
+    pointer-events: auto;
+  }
+`
+
 export const StyledWidgetIcon = styled<WidgetIconProps, 'div'>('div')`
   height: 13px;
   width: 13px;
@@ -168,5 +179,6 @@ export const StyledWidgetIcon = styled<WidgetIconProps, 'div'>('div')`
   }
 `
 export const StyledSpan = styled<{}, 'span'>('span')`
-  height: 13px;
+  text-align: left;
+  margin-right: 10px;
 `
diff --git a/components/brave_new_tab_ui/components/default/widget/widgetMenu.tsx b/components/brave_new_tab_ui/components/default/widget/widgetMenu.tsx
index d44efb1b6033..7bcfee157a4c 100644
--- a/components/brave_new_tab_ui/components/default/widget/widgetMenu.tsx
+++ b/components/brave_new_tab_ui/components/default/widget/widgetMenu.tsx
@@ -5,7 +5,7 @@
 
 import * as React from 'react'
 
-import { StyledWidgetMenuContainer, StyledWidgetMenu, StyledWidgetButton, StyledWidgetIcon, StyledSpan, StyledWidgetLink } from './styles'
+import { StyledWidgetMenuContainer, StyledWidgetMenu, StyledWidgetButton, StyledWidgetIcon, StyledSpan, StyledWidgetLink, StyledEllipsis } from './styles'
 import { IconButton } from '../../default'
 import EllipsisIcon from './assets/ellipsis'
 import HideIcon from './assets/hide'
@@ -18,12 +18,12 @@ interface Props {
   menuPosition: 'right' | 'left'
   hideWidget: () => void
   textDirection: string
-  toggleWidgetHover: () => void
   widgetMenuPersist: boolean
-  unpersistWidgetHover: () => void
+  persistWidget: () => void
+  unpersistWidget: () => void
   widgetTitle?: string
+  isForeground?: boolean
   onLearnMore?: () => void
-  onMouseEnter: () => void
   onDisconnect?: () => void
   onRefreshData?: () => void
 }
@@ -44,7 +44,7 @@ export default class WidgetMenu extends React.PureComponent<Props, State> {
 
   handleClickOutsideMenu = (event: Event) => {
     if (this.settingsMenuRef && !this.settingsMenuRef.current.contains(event.target)) {
-      this.props.unpersistWidgetHover()
+      this.props.unpersistWidget()
       this.closeMenu()
     }
   }
@@ -58,6 +58,10 @@ export default class WidgetMenu extends React.PureComponent<Props, State> {
   }
 
   toggleMenu = () => {
+    if (!this.state.showMenu) {
+      this.props.persistWidget()
+    }
+
     this.setState({ showMenu: !this.state.showMenu })
   }
 
@@ -67,7 +71,7 @@ export default class WidgetMenu extends React.PureComponent<Props, State> {
 
   unmountWidget = () => {
     this.props.hideWidget()
-    this.props.unpersistWidgetHover()
+    this.props.unpersistWidget()
     this.closeMenu()
   }
 
@@ -82,8 +86,8 @@ export default class WidgetMenu extends React.PureComponent<Props, State> {
       textDirection,
       widgetMenuPersist,
       widgetTitle,
+      isForeground,
       onLearnMore,
-      onMouseEnter,
       onDisconnect,
       onRefreshData
     } = this.props
@@ -91,16 +95,16 @@ export default class WidgetMenu extends React.PureComponent<Props, State> {
     const hideString = widgetTitle ? `${getLocale('hide')} ${widgetTitle}` : getLocale('hide')
 
     return (
-      <StyledWidgetMenuContainer
-        menuPosition={menuPosition}
-        innerRef={this.settingsMenuRef}
-        widgetMenuPersist={widgetMenuPersist}
-        onMouseEnter={onMouseEnter}
-      >
-        <IconButton isClickMenu={true} onClick={this.toggleMenu}><EllipsisIcon/></IconButton>
+      <StyledWidgetMenuContainer innerRef={this.settingsMenuRef}>
+        <StyledEllipsis widgetMenuPersist={widgetMenuPersist} isForeground={isForeground}>
+          <IconButton isClickMenu={true} onClick={this.toggleMenu}>
+            <EllipsisIcon/>
+          </IconButton>
+        </StyledEllipsis>
         {showMenu && <StyledWidgetMenu
           textDirection={textDirection}
           menuPosition={menuPosition}
+          widgetMenuPersist={widgetMenuPersist}
         >
           <StyledWidgetButton
             onClick={this.unmountWidget}
diff --git a/components/brave_new_tab_ui/containers/newTab/index.tsx b/components/brave_new_tab_ui/containers/newTab/index.tsx
index 832d8caeef28..4c163803d4ec 100644
--- a/components/brave_new_tab_ui/containers/newTab/index.tsx
+++ b/components/brave_new_tab_ui/containers/newTab/index.tsx
@@ -719,6 +719,7 @@ class NewTabPage extends React.Component<Props, State> {
         menuPosition={'left'}
         isCrypto={true}
         isCryptoTab={!showContent}
+        isForeground={showContent}
         textDirection={textDirection}
         preventFocus={false}
         hideWidget={this.toggleShowRewards}
@@ -781,6 +782,7 @@ class NewTabPage extends React.Component<Props, State> {
         isCryptoTab={!showContent}
         menuPosition={'left'}
         widgetTitle={'Binance'}
+        isForeground={showContent}
         textDirection={textDirection}
         preventFocus={false}
         hideWidget={this.toggleShowBinance}
@@ -828,6 +830,7 @@ class NewTabPage extends React.Component<Props, State> {
         isCryptoTab={!showContent}
         menuPosition={'left'}
         widgetTitle={'Gemini'}
+        isForeground={showContent}
         textDirection={textDirection}
         preventFocus={false}
         hideWidget={this.toggleShowGemini}