Update account options menu design (#8654)

The `AccountDetailsDropdown` component has been rewritten to use the
new `Menu` component, and to follow the latest designs.

This should be functionally equivalent. A couple of the icons have
changed, but that's about it.

Support for a subtitle was added to `MenuItem` to support the `origin`
subtitle used for the explorer link for custom RPC endpoints.

A few adjustments were required to `test/helper.js` to accommodate
the use of `Menu` from a JSDOM context (this is the first time it's
been used in a unit test). A `popover-content` element was added to the
fake DOM, and another global was added that `react-popper` used
internally.

An additional driver method (`clickPoint`) was added to the e2e driver
to allow clicking the background behind the menu to dismiss it. This
wasn't possible using the `clickElement` method, because that method
would refuse to click an obscured element. The only non-obscured
element to click was the menu backdrop, and that didn't work either
because the center was obscured by the menu (Selenium clicks the center
of whichever element is targeted).

test/e2e/metamask-responsive-ui.spec.js

@@ -117,9 +117,12 @@ describe('MetaMask', function () {
 
   describe('Show account information', function () {
     it('show account details dropdown menu', async function () {
-      await driver.clickElement(By.css('button.menu-bar__account-options'))
-      const options = await driver.findElements(By.css('div.menu.account-details-dropdown div.menu__item'))
+      await driver.clickElement(By.css('[data-testid="account-options-menu-button"]'))
+      const options = await driver.findElements(By.css('.account-options-menu .menu-item'))
       assert.equal(options.length, 4) // HD Wallet type does not have to show the Remove Account option
+      // click outside of menu to dismiss
+      // account menu button chosen because the menu never covers it.
+      await driver.clickPoint(By.css('.account-menu__icon'), 0, 0)
       await driver.delay(regularDelayMs)
     })
   })

test/e2e/webdriver/driver.js

@@ -71,6 +71,15 @@ class Driver {
     await element.click()
   }
 
+  async clickPoint (locator, x, y) {
+    const element = await this.findElement(locator)
+    await this.driver
+      .actions()
+      .move({ origin: element, x, y })
+      .click()
+      .perform()
+  }
+
   async scrollToElement (element) {
     await this.driver.executeScript('arguments[0].scrollIntoView(true)', element)
   }

test/helper.js

@@ -57,6 +57,13 @@ global.document = window.document
 // required by `react-tippy`
 global.navigator = window.navigator
 global.Element = window.Element
+// required by `react-popper`
+global.HTMLElement = window.HTMLElement
+
+// required by any components anchored on `popover-content`
+const popoverContent = window.document.createElement('div')
+popoverContent.setAttribute('id', 'popover-content')
+window.document.body.appendChild(popoverContent)
 
 // delete AbortController added by jsdom so it can be polyfilled correctly below
 delete window.AbortController

ui/app/components/app/index.scss

@@ -102,8 +102,6 @@
 
 @import './connected-status-indicator/index';
 
-@import './dropdowns/account-details-dropdown/index';
-
 @import '../ui/check-box/index';
 
 @import '../ui/dropdown/dropdown';