Fixing CSS formatting issues

apps/remix-ide-e2e/src/commands/verifyContracts.ts

@@ -22,6 +22,9 @@ function verifyContracts (browser: NightwatchBrowser, compiledContractNames: str
       if (opts.version) {
         browser
           .click('*[data-id="compilation-details"]')
+          .waitForElementVisible('*[data-id="remixui_treeviewitem_metadata"]')
+          .pause(2000)
+          .click('*[data-id="remixui_treeviewitem_metadata"]')
           .waitForElementVisible('*[data-id="treeViewDivtreeViewItemcompiler"]')
           .pause(2000)
           .click('*[data-id="treeViewDivtreeViewItemcompiler"]')

apps/remix-ide/src/app.js

@@ -419,6 +419,8 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
         fn: null
       }
     )
+  } else {
+    startWalkthroughService()
   }
 
   // CONTENT VIEWS & DEFAULT PLUGINS
@@ -514,6 +516,4 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
 
   if (params.embed) framingService.embed()
   framingService.start(params)
-
-  startWalkthroughService()
 }

apps/remix-ide/src/app/ui/landing-page/landing-page.js

@@ -216,7 +216,7 @@ export class LandingPage extends ViewPlugin {
 
     const invertNum = (themeQuality === 'dark') ? 1 : 0
     if (this.solEnv.getElementsByTagName('img')[0]) this.solEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
-    if (this.debuggerEnv.getElementsByTagName('img')[0]) this.debuggerEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
+    if (this.optimismEnv.getElementsByTagName('img')[0]) this.optimismEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
     if (this.solhintEnv.getElementsByTagName('img')[0]) this.solhintEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
     if (this.learnEthEnv.getElementsByTagName('img')[0]) this.learnEthEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
     if (this.sourcifyEnv.getElementsByTagName('img')[0]) this.sourcifyEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
@@ -277,10 +277,10 @@ export class LandingPage extends ViewPlugin {
       this.verticalIcons.select('solidity')
       _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'solidity'])
     }
-    const startDebugger = async () => {
-      await this.appManager.activatePlugin('debugger')
-      this.verticalIcons.select('debugger')
-      _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'debugger'])
+    const startOptimism = async () => {
+      await this.appManager.activatePlugin('optimism-compiler')
+      this.verticalIcons.select('optimism-compiler')
+      _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'optimism-compiler'])
     }
     const startSolhint = async () => {
       await this.appManager.activatePlugin(['solidity', 'solhint'])
@@ -385,8 +385,8 @@ export class LandingPage extends ViewPlugin {
     // main
     this.solEnv = createLargeButton('assets/img/solidityLogo.webp', 'solidityLogo', 'Solidity', startSolidity)
     // Featured
-    this.debuggerEnv = createLargeButton('assets/img/debuggerLogo.webp', 'debuggerLogo', 'Debugger', startDebugger)
-    this.solhintEnv = createLargeButton('assets/img/solhintLogo.png', 'solhintLogo', 'solhint linter', startSolhint)
+    this.optimismEnv = createLargeButton('assets/img/optimismLogo.webp', 'optimismLogo', 'Optimism', startOptimism)
+    this.solhintEnv = createLargeButton('assets/img/solhintLogo.png', 'solhintLogo', 'Solhint linter', startSolhint)
     this.learnEthEnv = createLargeButton('assets/img/learnEthLogo.webp', 'learnEthLogo', 'LearnEth', startLearnEth)
     this.sourcifyEnv = createLargeButton('assets/img/sourcifyLogo.webp', 'sourcifyLogo', 'Sourcify', startSourceVerify)
     this.moreEnv = createLargeButton('assets/img/moreLogo.webp', 'moreLogo', 'More', startPluginManager)
@@ -395,7 +395,7 @@ export class LandingPage extends ViewPlugin {
     const themeQuality = globalRegistry.get('themeModule').api.currentTheme().quality
     const invertNum = (themeQuality === 'dark') ? 1 : 0
     this.solEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
-    this.debuggerEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
+    this.optimismEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
     this.solhintEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
     this.learnEthEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
     this.sourcifyEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
@@ -505,10 +505,10 @@ export class LandingPage extends ViewPlugin {
                     <h4>Featured Plugins</h4>
                     <div class="d-flex flex-row pt-2">
                       ${this.solEnv}
+                      ${this.optimismEnv}
                       ${this.learnEthEnv}
                       ${this.solhintEnv}
-                      ${this.sourcifyEnv}
-                      ${this.debuggerEnv}
+                      ${this.sourcifyEnv}                      
                       ${this.moreEnv}
                     </div>
                   </div>

apps/remix-ide/src/assets/js/editor/darkTheme.js

@@ -30,7 +30,7 @@ ace.define("ace/theme/remixDark",["require","exports","module","ace/lib/dom"], f
   }\
   .ace-remixDark {\
   background-color: #222336;\
-  color: #a2a3bd;\
+  color: #d5d5e9;\
   }\
   .ace-remixDark .ace_cursor {\
   border-left: 2px solid #FFFFFF;\
@@ -109,10 +109,10 @@ ace.define("ace/theme/remixDark",["require","exports","module","ace/lib/dom"], f
   }\
   .ace-remixDark .ace_type {\
   color:#75ceef;\
-  }]\
-  .ace-remixDark .ace_visibility (\
+  }\
+  .ace-remixDark .ace_visibility {\
     color:#f7d777;\
-  )\
+  }\
   .ace-remixDark .ace_identifier {\
     color:#bec1dd;\
   }\
@@ -174,8 +174,8 @@ ace.define("ace/theme/remixDark",["require","exports","module","ace/lib/dom"], f
   color: #000;\
   }\
   ";
-  
+
   var dom = acequire("../lib/dom");
   dom.importCssString(exports.cssText, exports.cssClass);
-  
-  });
+
+  });

libs/remix-analyzer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remix-project/remix-analyzer",
-  "version": "0.5.12",
+  "version": "0.5.13",
   "description": "Tool to perform static analysis on Solidity smart contracts",
   "main": "index.js",
   "types": ".index.d.ts",
@@ -23,7 +23,7 @@
     "@ethereumjs/tx": "^3.2.1",
     "@ethereumjs/vm": "^5.4.1",
     "@remix-project/remix-astwalker": "^0.0.26",
-    "@remix-project/remix-lib": "^0.5.3",
+    "@remix-project/remix-lib": "^0.5.4",
     "async": "^2.6.2",
     "ethereumjs-util": "^7.0.10",
     "ethers": "^5.1.4",
@@ -51,5 +51,5 @@
     "typescript": "^3.7.5"
   },
   "typings": "index.d.ts",
-  "gitHead": "5e91f3010a7198f1b2d90cc7796bda750c58f1ea"
+  "gitHead": "664824605fa84648c79770631da371d4f81e0052"
 }

libs/remix-astwalker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remix-project/remix-astwalker",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "description": "Tool to walk through Solidity AST",
   "main": "index.js",
   "scripts": {
@@ -37,7 +37,7 @@
     "@ethereumjs/block": "^3.3.0",
     "@ethereumjs/tx": "^3.2.1",
     "@ethereumjs/vm": "^5.4.1",
-    "@remix-project/remix-lib": "^0.5.3",
+    "@remix-project/remix-lib": "^0.5.4",
     "@types/tape": "^4.2.33",
     "async": "^2.6.2",
     "ethereumjs-util": "^7.0.10",
@@ -53,5 +53,5 @@
     "tap-spec": "^5.0.0"
   },
   "typings": "index.d.ts",
-  "gitHead": "5e91f3010a7198f1b2d90cc7796bda750c58f1ea"
+  "gitHead": "664824605fa84648c79770631da371d4f81e0052"
 }

libs/remix-debug/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remix-project/remix-debug",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "Tool to debug Ethereum transactions",
   "contributors": [
     {
@@ -23,7 +23,7 @@
     "@ethereumjs/tx": "^3.2.1",
     "@ethereumjs/vm": "^5.4.1",
     "@remix-project/remix-astwalker": "^0.0.26",
-    "@remix-project/remix-lib": "^0.5.3",
+    "@remix-project/remix-lib": "^0.5.4",
     "async": "^2.6.2",
     "commander": "^2.19.0",
     "deep-equal": "^1.0.1",
@@ -61,5 +61,5 @@
   },
   "homepage": "https://github.com/ethereum/remix-project/tree/master/libs/remix-debug#readme",
   "typings": "src/index.d.ts",
-  "gitHead": "5e91f3010a7198f1b2d90cc7796bda750c58f1ea"
+  "gitHead": "664824605fa84648c79770631da371d4f81e0052"
 }

libs/remix-lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remix-project/remix-lib",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "Library to various Remix tools",
   "contributors": [
     {
@@ -53,5 +53,5 @@
   },
   "homepage": "https://github.com/ethereum/remix-project/tree/master/libs/remix-lib#readme",
   "typings": "src/index.d.ts",
-  "gitHead": "5e91f3010a7198f1b2d90cc7796bda750c58f1ea"
+  "gitHead": "664824605fa84648c79770631da371d4f81e0052"
 }

libs/remix-simulator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remix-project/remix-simulator",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Ethereum IDE and tools for the web",
   "contributors": [
     {
@@ -18,7 +18,7 @@
     "@ethereumjs/common": "^2.2.0",
     "@ethereumjs/tx": "^3.2.1",
     "@ethereumjs/vm": "^5.4.1",
-    "@remix-project/remix-lib": "^0.5.3",
+    "@remix-project/remix-lib": "^0.5.4",
     "ansi-gray": "^0.1.1",
     "async": "^3.1.0",
     "body-parser": "^1.18.2",
@@ -66,5 +66,5 @@
   },
   "homepage": "https://github.com/ethereum/remix-project/tree/master/libs/remix-simulator#readme",
   "typings": "src/index.d.ts",
-  "gitHead": "5e91f3010a7198f1b2d90cc7796bda750c58f1ea"
+  "gitHead": "664824605fa84648c79770631da371d4f81e0052"
 }

libs/remix-solidity/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remix-project/remix-solidity",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "Tool to load and run Solidity compiler",
   "main": "index.js",
   "types": "./index.d.ts",
@@ -18,7 +18,7 @@
     "@ethereumjs/block": "^3.3.0",
     "@ethereumjs/tx": "^3.2.1",
     "@ethereumjs/vm": "^5.4.1",
-    "@remix-project/remix-lib": "^0.5.3",
+    "@remix-project/remix-lib": "^0.5.4",
     "async": "^2.6.2",
     "eslint-scope": "^5.0.0",
     "ethereumjs-util": "^7.0.10",
@@ -59,5 +59,5 @@
   },
   "homepage": "https://github.com/ethereum/remix-project/tree/master/libs/remix-solidity#readme",
   "typings": "index.d.ts",
-  "gitHead": "5e91f3010a7198f1b2d90cc7796bda750c58f1ea"
+  "gitHead": "664824605fa84648c79770631da371d4f81e0052"
 }

libs/remix-tests/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remix-project/remix-tests",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Tool to test Solidity smart contracts",
   "main": "src/index.js",
   "types": "./src/index.d.ts",
@@ -39,9 +39,9 @@
     "@ethereumjs/common": "^2.2.0",
     "@ethereumjs/tx": "^3.2.1",
     "@ethereumjs/vm": "^5.4.1",
-    "@remix-project/remix-lib": "^0.5.3",
-    "@remix-project/remix-simulator": "^0.2.3",
-    "@remix-project/remix-solidity": "^0.4.3",
+    "@remix-project/remix-lib": "^0.5.4",
+    "@remix-project/remix-simulator": "^0.2.4",
+    "@remix-project/remix-solidity": "^0.4.4",
     "ansi-gray": "^0.1.1",
     "async": "^2.6.0",
     "axios": ">=0.21.1",
@@ -77,5 +77,5 @@
     "typescript": "^3.3.1"
   },
   "typings": "src/index.d.ts",
-  "gitHead": "5e91f3010a7198f1b2d90cc7796bda750c58f1ea"
+  "gitHead": "664824605fa84648c79770631da371d4f81e0052"
 }

libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx

@@ -16,6 +16,24 @@ export const ModalDialog = (props: ModalDialogProps) => {
     modal.current.focus()
   }, [props.hide])
 
+  useEffect(() => {
+    function handleBlur (e) {
+      if (!e.currentTarget.contains(e.relatedTarget)) {
+        e.stopPropagation()
+        if (document.activeElement !== this) {
+          handleHide()
+        }
+      }
+    }
+    if (modal.current) {
+      modal.current.addEventListener('blur', handleBlur)
+
+      return () => {
+        modal.current.removeEventListener('blur', handleBlur)
+      }
+    }
+  }, [modal.current])
+
   const modalKeyEvent = (keyCode) => {
     if (keyCode === 27) { // Esc
       if (props.cancelFn) props.cancelFn()
@@ -40,13 +58,6 @@ export const ModalDialog = (props: ModalDialogProps) => {
     handleHide()
   }
 
-  const handleBlur = (e) => {
-    if (!e.currentTarget.contains(e.relatedTarget)) {
-      e.stopPropagation()
-      handleHide()
-    }
-  }
-
   return (
     <div
       data-id={`${props.id}ModalDialogContainer-react`}
@@ -58,7 +69,6 @@ export const ModalDialog = (props: ModalDialogProps) => {
     >
       <div className="modal-dialog" role="document">
         <div
-          onBlur={handleBlur}
           ref={modal}
           tabIndex={-1}
           className={'modal-content remixModalContent ' + (props.modalClass ? props.modalClass : '')}

libs/remix-ui/solidity-compiler/src/lib/actions/compiler.ts

@@ -44,7 +44,7 @@ export const listenToEvents = (editor, compileTabLogic) => (dispatch: React.Disp
   })
 
   compileTabLogic.compiler.event.register('loadingCompiler', () => {
-    dispatch(setCompilerMode('compilationDuration'))
+    dispatch(setCompilerMode('loadingCompiler'))
   })
 
   compileTabLogic.compiler.event.register('compilerLoaded', () => {