New Settings: Show extension in full size view

app/scripts/controllers/preferences.js

@@ -86,6 +86,7 @@ export default class PreferencesController {
       forgottenPassword: false,
       preferences: {
         autoLockTimeLimit: undefined,
+        showExtensionInFullSizeView: false,
         showFiatInTestnets: false,
         showTestNetworks: false,
         useNativeCurrencyAsPrimaryCurrency: true,

app/scripts/lib/backup.test.js

@@ -158,6 +158,7 @@ const jsonData = JSON.stringify({
     forgottenPassword: false,
     preferences: {
       hideZeroBalanceTokens: false,
+      showExtensionInFullSizeView: false,
       showFiatInTestnets: false,
       showTestNetworks: true,
       useNativeCurrencyAsPrimaryCurrency: true,

app/scripts/lib/setupSentry.js

@@ -195,6 +195,7 @@ export const SENTRY_BACKGROUND_STATE = {
     preferences: {
       autoLockTimeLimit: true,
       hideZeroBalanceTokens: true,
+      showExtensionInFullSizeView: true,
       showFiatInTestnets: true,
       showTestNetworks: true,
       useNativeCurrencyAsPrimaryCurrency: true,

test/data/mock-state.json

@@ -108,6 +108,7 @@
     },
     "preferences": {
       "hideZeroBalanceTokens": false,
+      "showExtensionInFullSizeView": false,
       "showFiatInTestnets": false,
       "showTestNetworks": true,
       "useNativeCurrencyAsPrimaryCurrency": true

test/e2e/fixture-builder.js

@@ -300,6 +300,7 @@ function defaultFixture() {
         openSeaEnabled: false,
         preferences: {
           hideZeroBalanceTokens: false,
+          showExtensionInFullSizeView: false,
           showFiatInTestnets: false,
           showTestNetworks: false,
           useNativeCurrencyAsPrimaryCurrency: true,
@@ -421,6 +422,7 @@ function onboardingFixture() {
         openSeaEnabled: false,
         preferences: {
           hideZeroBalanceTokens: false,
+          showExtensionInFullSizeView: false,
           showFiatInTestnets: false,
           showTestNetworks: false,
           useNativeCurrencyAsPrimaryCurrency: true,

test/e2e/restore/MetaMaskUserData.json

@@ -33,6 +33,7 @@
     "openSeaEnabled": false,
     "preferences": {
       "hideZeroBalanceTokens": false,
+      "showExtensionInFullSizeView": false,
       "showFiatInTestnets": false,
       "showTestNetworks": false,
       "useNativeCurrencyAsPrimaryCurrency": true

test/e2e/tests/full-size-view-settings.spec.js

@@ -0,0 +1,62 @@
+const { strict: assert } = require('assert');
+const {
+  withFixtures,
+  unlockWallet,
+  openDapp,
+  defaultGanacheOptions,
+  WINDOW_TITLES,
+} = require('../helpers');
+const FixtureBuilder = require('../fixture-builder');
+
+const toggleFullSizeViewSetting = async (driver) => {
+  await driver.clickElement('[data-testid="account-options-menu-button"]');
+  await driver.clickElement({ text: 'Settings', tag: 'div' });
+  await driver.clickElement({ text: 'Advanced', tag: 'div' });
+  await driver.clickElement(
+    '[data-testid="advanced-setting-show-extension-in-full-size-view"] .toggle-button > div',
+  );
+};
+
+describe('Full-size View Setting @no-mmi', function () {
+  it('opens the extension in popup view when opened from a dapp after enabling it in Advanced Settings', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: new FixtureBuilder()
+          .withNetworkControllerOnMainnet()
+          .withPermissionControllerConnectedToTestDapp()
+          .build(),
+        failOnConsoleError: false,
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test.fullTitle(),
+      },
+      async ({ driver }) => {
+        await unlockWallet(driver);
+        await toggleFullSizeViewSetting(driver);
+        await openDapp(driver);
+        await driver.clickElement('#maliciousPermit'); // Opens the extension in popup view.
+        const windowHandles = await driver.waitUntilXWindowHandles(
+          3,
+          1000,
+          10000,
+        );
+        const fullScreenWindowTitle = await driver.getWindowTitleByHandlerId(
+          windowHandles[0],
+        );
+        const dappWindowTitle = await driver.getWindowTitleByHandlerId(
+          windowHandles[1],
+        );
+        const popUpWindowTitle = await driver.getWindowTitleByHandlerId(
+          windowHandles[2],
+        );
+
+        assert.equal(
+          fullScreenWindowTitle,
+          WINDOW_TITLES.ExtensionInFullScreenView,
+        );
+        assert.equal(dappWindowTitle, WINDOW_TITLES.TestDApp);
+        assert.equal(popUpWindowTitle, WINDOW_TITLES.Dialog);
+      },
+    );
+  });
+});

test/e2e/tests/state-snapshots/errors-after-init-opt-in-background-state.json

@@ -165,6 +165,7 @@
     "forgottenPassword": false,
     "preferences": {
       "hideZeroBalanceTokens": false,
+      "showExtensionInFullSizeView": false,
       "showFiatInTestnets": false,
       "showTestNetworks": false,
       "useNativeCurrencyAsPrimaryCurrency": true

test/e2e/tests/state-snapshots/errors-after-init-opt-in-ui-state.json

@@ -29,6 +29,7 @@
     "currentLocale": "en",
     "preferences": {
       "hideZeroBalanceTokens": false,
+      "showExtensionInFullSizeView": false,
       "showFiatInTestnets": false,
       "showTestNetworks": false,
       "useNativeCurrencyAsPrimaryCurrency": true

test/e2e/tests/state-snapshots/errors-before-init-opt-in-background-state.json

@@ -96,6 +96,7 @@
       "openSeaEnabled": false,
       "preferences": {
         "hideZeroBalanceTokens": false,
+        "showExtensionInFullSizeView": false,
         "showFiatInTestnets": false,
         "showTestNetworks": false,
         "useNativeCurrencyAsPrimaryCurrency": true

test/e2e/tests/state-snapshots/errors-before-init-opt-in-ui-state.json

@@ -96,6 +96,7 @@
       "openSeaEnabled": false,
       "preferences": {
         "hideZeroBalanceTokens": false,
+        "showExtensionInFullSizeView": false,
         "showFiatInTestnets": false,
         "showTestNetworks": false,
         "useNativeCurrencyAsPrimaryCurrency": true

test/e2e/webdriver/driver.js

@@ -451,6 +451,11 @@ class Driver {
     throw new Error('waitUntilXWindowHandles timed out polling window handles');
   }
 
+  async getWindowTitleByHandlerId(handlerId) {
+    await this.driver.switchTo().window(handlerId);
+    return await this.driver.getTitle();
+  }
+
   async switchToWindowWithTitle(
     title,
     initialWindowHandles,

ui/ducks/metamask/metamask.js

@@ -40,6 +40,7 @@ const initialState = {
   currentBlockGasLimitByChainId: {},
   preferences: {
     autoLockTimeLimit: DEFAULT_AUTO_LOCK_TIME_LIMIT,
+    showExtensionInFullSizeView: false,
     showFiatInTestnets: false,
     showTestNetworks: false,
     useNativeCurrencyAsPrimaryCurrency: true,

ui/helpers/constants/settings.js

@@ -102,6 +102,13 @@ export const SETTINGS_CONSTANTS = [
     route: `${ADVANCED_ROUTE}#autolock-timer`,
     icon: 'fas fa-sliders-h',
   },
+  {
+    tabMessage: (t) => t('advanced'),
+    sectionMessage: (t) => t('showExtensionInFullSizeView'),
+    descriptionMessage: (t) => t('showExtensionInFullSizeViewDescription'),
+    route: `${ADVANCED_ROUTE}#extension-full-size-view`,
+    icon: 'fas fa-sliders-h',
+  },
   {
     tabMessage: (t) => t('advanced'),
     sectionMessage: (t) => t('dismissReminderField'),

ui/helpers/utils/settings-search.test.js

@@ -151,7 +151,7 @@ describe('Settings Search Utils', () => {
     });
 
     it('should get good advanced section number', () => {
-      expect(getNumberOfSettingsInSection(t, t('advanced'))).toStrictEqual(11);
+      expect(getNumberOfSettingsInSection(t, t('advanced'))).toStrictEqual(12);
     });
 
     it('should get good contact section number', () => {

ui/pages/routes/routes.component.js

@@ -155,6 +155,7 @@ export default class Routes extends Component {
     isNetworkUsed: PropTypes.bool,
     allAccountsOnNetworkAreEmpty: PropTypes.bool,
     isTestNet: PropTypes.bool,
+    showExtensionInFullSizeView: PropTypes.bool,
     currentChainId: PropTypes.string,
     shouldShowSeedPhraseReminder: PropTypes.bool,
     forgottenPassword: PropTypes.bool,
@@ -228,7 +229,14 @@ export default class Routes extends Component {
       setCurrentCurrencyToUSD,
       history,
       theme,
+      showExtensionInFullSizeView,
     } = this.props;
+
+    const windowType = getEnvironmentType();
+    if (showExtensionInFullSizeView && windowType === ENVIRONMENT_TYPE_POPUP) {
+      global.platform.openExtensionInBrowser();
+    }
+
     if (!currentCurrency) {
       setCurrentCurrencyToUSD();
     }

ui/pages/routes/routes.container.js

@@ -15,6 +15,7 @@ import {
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
   getUnapprovedConfirmations,
   ///: END:ONLY_INCLUDE_IF
+  getShowExtensionInFullSizeView,
 } from '../../selectors';
 import {
   lockMetamask,
@@ -66,6 +67,7 @@ function mapStateToProps(state) {
     isNetworkUsed: getIsNetworkUsed(state),
     allAccountsOnNetworkAreEmpty: getAllAccountsOnNetworkAreEmpty(state),
     isTestNet: getIsTestnet(state),
+    showExtensionInFullSizeView: getShowExtensionInFullSizeView(state),
     currentChainId: getCurrentChainId(state),
     shouldShowSeedPhraseReminder: getShouldShowSeedPhraseReminder(state),
     forgottenPassword: state.metamask.forgottenPassword,

ui/pages/settings/advanced-tab/__snapshots__/advanced-tab.component.test.js.snap

@@ -263,6 +263,72 @@ exports[`AdvancedTab Component should match snapshot 1`] = `
         </label>
       </div>
     </div>
+    <div
+      class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
+      data-testid="advanced-setting-show-extension-in-full-size-view"
+    >
+      <div
+        class="settings-page__content-item"
+      >
+        <span>
+          Show extension in full-size view
+        </span>
+        <div
+          class="settings-page__content-description"
+        >
+          Turn this on to make full-size view your default when you click the extension icon.
+        </div>
+      </div>
+      <div
+        class="settings-page__content-item-col"
+      >
+        <label
+          class="toggle-button toggle-button--off"
+          tabindex="0"
+        >
+          <div
+            style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+          >
+            <div
+              style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
+            >
+              <div
+                style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
+              />
+              <div
+                style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
+              />
+            </div>
+            <div
+              style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
+            >
+              <div
+                style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
+              />
+            </div>
+            <input
+              style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+              type="checkbox"
+              value="false"
+            />
+          </div>
+          <div
+            class="toggle-button__status"
+          >
+            <span
+              class="toggle-button__label-off"
+            >
+              Off
+            </span>
+            <span
+              class="toggle-button__label-on"
+            >
+              On
+            </span>
+          </div>
+        </label>
+      </div>
+    </div>
     <div
       class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
       data-testid="advanced-setting-custom-nonce"

ui/pages/settings/advanced-tab/advanced-tab.component.js

@@ -48,10 +48,12 @@ export default class AdvancedTab extends PureComponent {
     sendHexData: PropTypes.bool,
     showFiatInTestnets: PropTypes.bool,
     showTestNetworks: PropTypes.bool,
+    showExtensionInFullSizeView: PropTypes.bool,
     autoLockTimeLimit: PropTypes.number,
     setAutoLockTimeLimit: PropTypes.func.isRequired,
     setShowFiatConversionOnTestnetsPreference: PropTypes.func.isRequired,
     setShowTestNetworks: PropTypes.func.isRequired,
+    setShowExtensionInFullSizeView: PropTypes.func.isRequired,
     setDismissSeedBackUpReminder: PropTypes.func.isRequired,
     dismissSeedBackUpReminder: PropTypes.bool.isRequired,
     backupUserData: PropTypes.func.isRequired,
@@ -337,6 +339,40 @@ export default class AdvancedTab extends PureComponent {
     );
   }
 
+  renderToggleExtensionInFullSizeView() {
+    const { t } = this.context;
+    const { showExtensionInFullSizeView, setShowExtensionInFullSizeView } =
+      this.props;
+
+    return (
+      <Box
+        ref={this.settingsRefs[7]}
+        className="settings-page__content-row"
+        data-testid="advanced-setting-show-extension-in-full-size-view"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
+        gap={4}
+      >
+        <div className="settings-page__content-item">
+          <span>{t('showExtensionInFullSizeView')}</span>
+          <div className="settings-page__content-description">
+            {t('showExtensionInFullSizeViewDescription')}
+          </div>
+        </div>
+
+        <div className="settings-page__content-item-col">
+          <ToggleButton
+            value={showExtensionInFullSizeView}
+            onToggle={(value) => setShowExtensionInFullSizeView(!value)}
+            offLabel={t('off')}
+            onLabel={t('on')}
+          />
+        </div>
+      </Box>
+    );
+  }
+
   renderUseNonceOptIn() {
     const { t } = this.context;
     const { useNonceField, setUseNonceField } = this.props;
@@ -661,6 +697,7 @@ export default class AdvancedTab extends PureComponent {
         {this.renderHexDataOptIn()}
         {this.renderShowConversionInTestnets()}
         {this.renderToggleTestNetworks()}
+        {this.renderToggleExtensionInFullSizeView()}
         {this.renderUseNonceOptIn()}
         {this.renderAutoLockTimeLimit()}
         {this.renderUserDataBackup()}