Update account options menu design

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.

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';