Close window after opening fullscreen (#6966)

* Add background environment type

The `getEnvironmentType` method now checks for the background
environment as well, instead of returning 'notification' for that case.

Instead of adding another regex for the background path, the regexes
for each environment have been replaced with the URL constructor[0].
This is the standard method of parsing URLs, and is available in all
supported browsers.

[0]: https://developer.mozilla.org/en-US/docs/Web/API/URL

* Add note regarding a missing manifest permission

The `url` parameter to `tabs.query(...)` requires the `tabs` permission,
and will be ignored otherwise. We are missing this permission, so that
call does not work.

* Close window after opening full screen

The browser behaviour when opening a new tab differs between Chrome and
Firefox. In the case of a popup, Chrome will close the popup whereas
Firefox will leave it open. In the case of the notification window,
Chrome will move the new tab to the foreground, whereas Firefox will
leave the notification window in the foreground when opening a new tab.

We always want to close the current UI (popup or notification) when
switching to a full-screen view. The only exception to this is when the
switch is triggered from the background, which has no UI.

Closes #6513, #6685

app/scripts/lib/enums.js

@@ -1,6 +1,7 @@
 const ENVIRONMENT_TYPE_POPUP = 'popup'
 const ENVIRONMENT_TYPE_NOTIFICATION = 'notification'
 const ENVIRONMENT_TYPE_FULLSCREEN = 'fullscreen'
+const ENVIRONMENT_TYPE_BACKGROUND = 'background'
 
 const PLATFORM_BRAVE = 'Brave'
 const PLATFORM_CHROME = 'Chrome'
@@ -12,6 +13,7 @@ module.exports = {
   ENVIRONMENT_TYPE_POPUP,
   ENVIRONMENT_TYPE_NOTIFICATION,
   ENVIRONMENT_TYPE_FULLSCREEN,
+  ENVIRONMENT_TYPE_BACKGROUND,
   PLATFORM_BRAVE,
   PLATFORM_CHROME,
   PLATFORM_EDGE,

app/scripts/lib/util.js

@@ -5,6 +5,7 @@ const {
   ENVIRONMENT_TYPE_POPUP,
   ENVIRONMENT_TYPE_NOTIFICATION,
   ENVIRONMENT_TYPE_FULLSCREEN,
+  ENVIRONMENT_TYPE_BACKGROUND,
   PLATFORM_FIREFOX,
   PLATFORM_OPERA,
   PLATFORM_CHROME,
@@ -28,17 +29,21 @@ function getStack () {
  *  - 'popup' refers to the extension opened through the browser app icon (in top right corner in chrome and firefox)
  *  - 'responsive' refers to the main browser window
  *  - 'notification' refers to the popup that appears in its own window when taking action outside of metamask
+ *  - 'background' refers to the background page
  *
  * @returns {string} A single word label that represents the type of window through which the app is being viewed
  *
  */
 const getEnvironmentType = (url = window.location.href) => {
-  if (url.match(/popup.html(?:#.*)*$/)) {
+  const parsedUrl = new URL(url)
+  if (parsedUrl.pathname === '/popup.html') {
     return ENVIRONMENT_TYPE_POPUP
-  } else if (url.match(/home.html(?:\?.+)*$/) || url.match(/home.html(?:#.*)*$/)) {
+  } else if (parsedUrl.pathname === '/home.html') {
     return ENVIRONMENT_TYPE_FULLSCREEN
-  } else {
+  } else if (parsedUrl.pathname === '/notification.html') {
     return ENVIRONMENT_TYPE_NOTIFICATION
+  } else {
+    return ENVIRONMENT_TYPE_BACKGROUND
   }
 }
 

app/scripts/platforms/extension.js

@@ -1,6 +1,9 @@
 const extension = require('extensionizer')
 const {createExplorerLink: explorerLink} = require('etherscan-link')
 
+const {getEnvironmentType} = require('../lib/util')
+const {ENVIRONMENT_TYPE_BACKGROUND} = require('../lib/enums')
+
 class ExtensionPlatform {
 
   //
@@ -35,6 +38,9 @@ class ExtensionPlatform {
       extensionURL += `#${route}`
     }
     this.openWindow({ url: extensionURL })
+    if (getEnvironmentType() !== ENVIRONMENT_TYPE_BACKGROUND) {
+      window.close()
+    }
   }
 
   getPlatformInfo (cb) {

app/vendor/trezor/usb-permissions.js

@@ -25,6 +25,7 @@ const switchToPopupTab = (event) => {
       return;
   }
 
+  // TODO: remove this query, or add `tabs` permission. This does not work.
   // triggered from 'beforeunload' event
   // find tab by popup pattern and switch to it
   chrome.tabs.query({
@@ -47,4 +48,4 @@ window.addEventListener('message', event => {
   }
 });
 
-window.addEventListener('beforeunload', switchToPopupTab);
+window.addEventListener('beforeunload', switchToPopupTab);

test/unit/app/util-test.js

@@ -1,6 +1,48 @@
 const assert = require('assert')
-const { sufficientBalance } = require('../../../app/scripts/lib/util')
+const { getEnvironmentType, sufficientBalance } = require('../../../app/scripts/lib/util')
+const {
+  ENVIRONMENT_TYPE_POPUP,
+  ENVIRONMENT_TYPE_NOTIFICATION,
+  ENVIRONMENT_TYPE_FULLSCREEN,
+  ENVIRONMENT_TYPE_BACKGROUND,
+} = require('../../../app/scripts/lib/enums')
 
+describe('getEnvironmentType', function () {
+  it('should return popup type', function () {
+    const environmentType = getEnvironmentType('http://extension-id/popup.html')
+    assert.equal(environmentType, ENVIRONMENT_TYPE_POPUP)
+  })
+
+  it('should return notification type', function () {
+    const environmentType = getEnvironmentType('http://extension-id/notification.html')
+    assert.equal(environmentType, ENVIRONMENT_TYPE_NOTIFICATION)
+  })
+
+  it('should return fullscreen type', function () {
+    const environmentType = getEnvironmentType('http://extension-id/home.html')
+    assert.equal(environmentType, ENVIRONMENT_TYPE_FULLSCREEN)
+  })
+
+  it('should return background type', function () {
+    const environmentType = getEnvironmentType('http://extension-id/_generated_background_page.html')
+    assert.equal(environmentType, ENVIRONMENT_TYPE_BACKGROUND)
+  })
+
+  it('should return the correct type for a URL with a hash fragment', function () {
+    const environmentType = getEnvironmentType('http://extension-id/popup.html#hash')
+    assert.equal(environmentType, ENVIRONMENT_TYPE_POPUP)
+  })
+
+  it('should return the correct type for a URL with query parameters', function () {
+    const environmentType = getEnvironmentType('http://extension-id/popup.html?param=foo')
+    assert.equal(environmentType, ENVIRONMENT_TYPE_POPUP)
+  })
+
+  it('should return the correct type for a URL with query parameters and a hash fragment', function () {
+    const environmentType = getEnvironmentType('http://extension-id/popup.html?param=foo#hash')
+    assert.equal(environmentType, ENVIRONMENT_TYPE_POPUP)
+  })
+})
 
 describe('SufficientBalance', function () {
   it('returns true if max tx cost is equal to balance.', function () {