From 20920c54f316f7d08c3c98443c7ef74f8323501a Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Mon, 26 Jul 2021 15:17:27 +0100
Subject: [PATCH 1/7] Display only filename on compile button

---
 libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
index 658c533ac6..992fbb4bd4 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
@@ -579,7 +579,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
             <span className="text-break">
               <i ref={warningIcon} title="Compilation Slow" style={{ visibility: 'hidden' }} className="remixui_warnCompilationSlow fas fa-exclamation-triangle" aria-hidden="true"></i>
               { warningIcon.current && warningIcon.current.style.visibility === 'hidden' && <i ref={compileIcon} className="fas fa-sync remixui_icon" aria-hidden="true"></i> }
-              Compile { state.compiledFileName || '<no file selected>' }
+              Compile { typeof state.compiledFileName === 'string' ? helper.extractNameFromKey(state.compiledFileName) || '<no file selected>' : '<no file selected>' }
             </span>
           </button>
         </header>

From a827ed8561d86a9b7cbf390a8e19681e0929d8a9 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Mon, 26 Jul 2021 15:28:46 +0100
Subject: [PATCH 2/7] Added berlin to evm list

---
 libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
index 992fbb4bd4..91d645ea2c 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
@@ -531,6 +531,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
             <label className="remixui_compilerLabel form-check-label" htmlFor="evmVersionSelector">EVM Version</label>
             <select value={state.evmVersion} onChange={(e) => handleEvmVersionChange(e.target.value)} className="custom-select" id="evmVersionSelector">
               <option data-id={state.evmVersion === 'default' ? 'selected' : ''} value="default">compiler default</option>
+              <option data-id={state.evmVersion === 'berlin' ? 'selected' : ''} value="berlin">berlin</option>
               <option data-id={state.evmVersion === 'muirGlacier' ? 'selected' : ''} value="muirGlacier">muirGlacier</option>
               <option data-id={state.evmVersion === 'istanbul' ? 'selected' : ''} value="istanbul">istanbul</option>
               <option data-id={state.evmVersion === 'petersburg' ? 'selected' : ''} value="petersburg">petersburg</option>

From 2e9d922b51d4e00a1c35b074911fc22b34e79b3e Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Tue, 27 Jul 2021 10:27:06 +0100
Subject: [PATCH 3/7] Disable button when loading compiler

---
 .../solidity-compiler/src/lib/actions/compiler.ts    |  2 +-
 .../solidity-compiler/src/lib/compiler-container.tsx | 12 ++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/libs/remix-ui/solidity-compiler/src/lib/actions/compiler.ts b/libs/remix-ui/solidity-compiler/src/lib/actions/compiler.ts
index 5df99c1350..1cba2adff9 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/actions/compiler.ts
+++ b/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', () => {
diff --git a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
index 91d645ea2c..1f1feef4ca 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
@@ -35,6 +35,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     language: '',
     evmVersion: ''
   })
+  const [disableCompileButton, setDisableCompileButton] = useState<boolean>(false)
   const compileIcon = useRef(null)
   const warningIcon = useRef(null)
   const promptMessageInput = useRef(null)
@@ -83,6 +84,9 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
   }, [compileTabLogic])
 
   useEffect(() => {
+    const isDisabled = !compiledFileName || (compiledFileName && !isSolFileSelected(compiledFileName))
+
+    setDisableCompileButton(isDisabled)
     setState(prevState => {
       return { ...prevState, compiledFileName }
     })
@@ -266,6 +270,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     compileIcon.current.classList.add('remixui_spinningIcon')
     warningIcon.current.style.visibility = 'hidden'
     _updateLanguageSelector()
+    setDisableCompileButton(true)
   }
 
   const compilerLoaded = () => {
@@ -273,6 +278,9 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     compileIcon.current.setAttribute('title', '')
     compileIcon.current.classList.remove('remixui_spinningIcon')
     if (state.autoCompile) compile()
+    const isDisabled = !compiledFileName || (compiledFileName && !isSolFileSelected(compiledFileName))
+
+    setDisableCompileButton(isDisabled)
   }
 
   const compilationFinished = () => {
@@ -576,8 +584,8 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
               <label className="form-check-label custom-control-label" htmlFor="enableHardhat">Enable Hardhat Compilation</label>
             </div>
           }
-          <button id="compileBtn" data-id="compilerContainerCompileBtn" className="btn btn-primary btn-block remixui_disabled mt-3" title="Compile" onClick={compile} disabled={!state.compiledFileName || (state.compiledFileName && !isSolFileSelected(state.compiledFileName))}>
-            <span className="text-break">
+          <button id="compileBtn" data-id="compilerContainerCompileBtn" className="btn btn-primary btn-block remixui_disabled mt-3" title="Compile" onClick={compile} disabled={disableCompileButton}>
+            <span>
               <i ref={warningIcon} title="Compilation Slow" style={{ visibility: 'hidden' }} className="remixui_warnCompilationSlow fas fa-exclamation-triangle" aria-hidden="true"></i>
               { warningIcon.current && warningIcon.current.style.visibility === 'hidden' && <i ref={compileIcon} className="fas fa-sync remixui_icon" aria-hidden="true"></i> }
               Compile { typeof state.compiledFileName === 'string' ? helper.extractNameFromKey(state.compiledFileName) || '<no file selected>' : '<no file selected>' }

From 0292cfbef0659d1b2961061110895fac60ece132 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Tue, 27 Jul 2021 10:48:10 +0100
Subject: [PATCH 4/7] Remove warning icon

---
 .../src/lib/compiler-container.tsx                  | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
index 1f1feef4ca..453bdc30ce 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
@@ -37,7 +37,6 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
   })
   const [disableCompileButton, setDisableCompileButton] = useState<boolean>(false)
   const compileIcon = useRef(null)
-  const warningIcon = useRef(null)
   const promptMessageInput = useRef(null)
   const [hhCompilation, sethhCompilation] = useState(false)
   const [compilerContainer, dispatch] = useReducer(compilerReducer, compilerInitialState)
@@ -247,14 +246,8 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
   }
 
   const compilationDuration = (speed: number) => {
-    if (!warningIcon.current) return
     if (speed > 1000) {
-      const msg = `Last compilation took ${speed}ms. We suggest to turn off autocompilation.`
-
-      warningIcon.current.setAttribute('title', msg)
-      warningIcon.current.style.visibility = 'visible'
-    } else {
-      warningIcon.current.style.visibility = 'hidden'
+      console.log(`Last compilation took ${speed}ms. We suggest to turn off autocompilation.`)
     }
   }
 
@@ -268,7 +261,6 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
     if (!compileIcon.current) return
     compileIcon.current.setAttribute('title', 'compiler is loading, please wait a few moments.')
     compileIcon.current.classList.add('remixui_spinningIcon')
-    warningIcon.current.style.visibility = 'hidden'
     _updateLanguageSelector()
     setDisableCompileButton(true)
   }
@@ -586,8 +578,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
           }
           <button id="compileBtn" data-id="compilerContainerCompileBtn" className="btn btn-primary btn-block remixui_disabled mt-3" title="Compile" onClick={compile} disabled={disableCompileButton}>
             <span>
-              <i ref={warningIcon} title="Compilation Slow" style={{ visibility: 'hidden' }} className="remixui_warnCompilationSlow fas fa-exclamation-triangle" aria-hidden="true"></i>
-              { warningIcon.current && warningIcon.current.style.visibility === 'hidden' && <i ref={compileIcon} className="fas fa-sync remixui_icon" aria-hidden="true"></i> }
+              { <i ref={compileIcon} className="fas fa-sync remixui_icon" aria-hidden="true"></i> }
               Compile { typeof state.compiledFileName === 'string' ? helper.extractNameFromKey(state.compiledFileName) || '<no file selected>' : '<no file selected>' }
             </span>
           </button>

From 86a3668c88d11cb1200c28839c6afffa40426d20 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Tue, 27 Jul 2021 14:56:21 +0100
Subject: [PATCH 5/7] Fix disappearing modal after tab switch

---
 .../src/lib/remix-ui-modal-dialog.tsx         | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
index ec016068e9..6a764a85e2 100644
--- a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
+++ b/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 : '')}

From 05cef8dc9c18fb50d75fde3882fa3de45fcbdcf7 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Tue, 27 Jul 2021 15:13:19 +0100
Subject: [PATCH 6/7] Make compilation details collapsable

---
 .../src/lib/contract-selection.tsx            | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx b/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
index 0d2d6bf486..8528e15072 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
@@ -162,17 +162,25 @@ export const ContractSelection = (props: ContractSelectionProps) => {
     }
     const contractProperties = contractsDetails[selectedContract] || {}
     const log = <div className="remixui_detailsJSON">
-      {
-        Object.keys(contractProperties).map((propertyName, index) => {
-          const copyDetails = <span className="remixui_copyDetails"><CopyToClipboard content={contractProperties[propertyName]} direction='top' /></span>
-          const questionMark = <span className="remixui_questionMark"><i title={ help[propertyName] } className="fas fa-question-circle" aria-hidden="true"></i></span>
-
-          return (<div className="remixui_log" key={index}>
-            <div className="remixui_key">{ propertyName } { copyDetails } { questionMark }</div>
-            { insertValue(contractProperties, propertyName) }
-          </div>)
-        })
-      }
+      <TreeView>
+        {
+          Object.keys(contractProperties).map((propertyName, index) => {
+            const copyDetails = <span className="remixui_copyDetails"><CopyToClipboard content={contractProperties[propertyName]} direction='top' /></span>
+            const questionMark = <span className="remixui_questionMark"><i title={ help[propertyName] } className="fas fa-question-circle" aria-hidden="true"></i></span>
+
+            return (
+              <div className="remixui_log" key={index}>
+                <TreeViewItem
+                  label={
+                    <div className="remixui_key">{ propertyName } { copyDetails } { questionMark }</div>
+                  }>
+                  { insertValue(contractProperties, propertyName) }
+                </TreeViewItem>
+              </div>
+            )
+          })
+        }
+      </TreeView>
     </div>
 
     modal(selectedContract, log, 'Close', null)

From caf93dd8ab8d97d7c5da245b787a46eb63cb118b Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Wed, 28 Jul 2021 10:49:39 +0200
Subject: [PATCH 7/7] verifycontracts e2e tree fix

---
 apps/remix-ide-e2e/src/commands/verifyContracts.ts             | 3 +++
 libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/remix-ide-e2e/src/commands/verifyContracts.ts b/apps/remix-ide-e2e/src/commands/verifyContracts.ts
index 027f71dd05..e7dbf4a591 100644
--- a/apps/remix-ide-e2e/src/commands/verifyContracts.ts
+++ b/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"]')
diff --git a/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx b/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
index 8528e15072..e86689f94e 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
@@ -172,7 +172,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
               <div className="remixui_log" key={index}>
                 <TreeViewItem
                   label={
-                    <div className="remixui_key">{ propertyName } { copyDetails } { questionMark }</div>
+                    <div data-id={`remixui_treeviewitem_${propertyName}`} className="remixui_key">{ propertyName } { copyDetails } { questionMark }</div>
                   }>
                   { insertValue(contractProperties, propertyName) }
                 </TreeViewItem>