Merge branch 'develop' of github.com:MetaMask/metamask-extension into dapp_action_replay_improvements

Author: jpuri

test/e2e/tests/custom-rpc-history.spec.js

@@ -1,5 +1,5 @@
 const { strict: assert } = require('assert');
-const { convertToHexValue, withFixtures, largeDelayMs } = require('../helpers');
+const { convertToHexValue, withFixtures } = require('../helpers');
 const FixtureBuilder = require('../fixture-builder');
 
 describe('Stores custom RPC history', function () {
@@ -30,8 +30,7 @@ describe('Stores custom RPC history', function () {
         const rpcUrl = `http://127.0.0.1:${port}`;
         const networkName = 'Secondary Ganache Testnet';
 
-        await driver.delay(largeDelayMs);
-
+        await driver.waitForElementNotPresent('.loading-overlay');
         await driver.clickElement('.network-display');
 
         await driver.clickElement({ text: 'Add network', tag: 'button' });
@@ -87,8 +86,7 @@ describe('Stores custom RPC history', function () {
         // duplicate network
         const duplicateRpcUrl = 'https://mainnet.infura.io/v3/';
 
-        await driver.delay(largeDelayMs);
-
+        await driver.waitForElementNotPresent('.loading-overlay');
         await driver.clickElement('.network-display');
 
         await driver.clickElement({ text: 'Add network', tag: 'button' });
@@ -132,8 +130,7 @@ describe('Stores custom RPC history', function () {
         const newRpcUrl = 'http://localhost:8544';
         const duplicateChainId = '1';
 
-        await driver.delay(largeDelayMs);
-
+        await driver.waitForElementNotPresent('.loading-overlay');
         await driver.clickElement('.network-display');
 
         await driver.clickElement({ text: 'Add network', tag: 'button' });
@@ -181,8 +178,7 @@ describe('Stores custom RPC history', function () {
         await driver.fill('#password', 'correct horse battery staple');
         await driver.press('#password', driver.Key.ENTER);
 
-        await driver.delay(largeDelayMs);
-
+        await driver.waitForElementNotPresent('.loading-overlay');
         await driver.clickElement('.network-display');
 
         await driver.clickElement({ text: 'Ethereum Mainnet', tag: 'span' });
@@ -221,7 +217,7 @@ describe('Stores custom RPC history', function () {
         await driver.fill('#password', 'correct horse battery staple');
         await driver.press('#password', driver.Key.ENTER);
 
-        await driver.delay(largeDelayMs);
+        await driver.waitForElementNotPresent('.loading-overlay');
         await driver.clickElement('.network-display');
 
         // only recent 3 are found and in correct order (most recent at the top)
@@ -270,7 +266,7 @@ describe('Stores custom RPC history', function () {
         await driver.fill('#password', 'correct horse battery staple');
         await driver.press('#password', driver.Key.ENTER);
 
-        await driver.delay(largeDelayMs);
+        await driver.waitForElementNotPresent('.loading-overlay');
         await driver.clickElement('.network-display');
 
         await driver.clickElement({ text: 'Add network', tag: 'button' });

test/e2e/webdriver/driver.js

@@ -1,6 +1,12 @@
 const { promises: fs } = require('fs');
 const { strict: assert } = require('assert');
-const { until, error: webdriverError, By, Key } = require('selenium-webdriver');
+const {
+  By,
+  Condition,
+  error: webdriverError,
+  Key,
+  until,
+} = require('selenium-webdriver');
 const cssToXPath = require('css-to-xpath');
 
 /**
@@ -33,6 +39,14 @@ function wrapElementWithAPI(element, driver) {
   return element;
 }
 
+until.elementIsNotPresent = function elementIsNotPresent(locator) {
+  return new Condition(`Element not present`, function (driver) {
+    return driver.findElements(By.css(locator)).then(function (elements) {
+      return elements.length === 0;
+    });
+  });
+};
+
 /**
  * For Selenium WebDriver API documentation, see:
  * https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
@@ -170,6 +184,10 @@ class Driver {
     }, this.timeout);
   }
 
+  async waitForElementNotPresent(element) {
+    return await this.driver.wait(until.elementIsNotPresent(element));
+  }
+
   async quit() {
     await this.driver.quit();
   }

ui/css/design-system/attributes.scss

@@ -50,7 +50,8 @@ $font-style: normal, italic, oblique;
 $font-size: 10px, 12px;
 $border-radius: (
   xs: 2px,
-  md: 4px,
+  sm: 4px,
+  md: 6px,
   lg: 8px,
   xl: 12px,
   full: 50%,