Compilation Details Patch

apps/remix-ide-e2e/src/tests/terminal.test.ts

@@ -117,7 +117,6 @@ module.exports = {
       .waitForElementPresent('*[data-id="universalDappUiContractActionWrapper"]', 60000)
       .clickInstance(0)
       .clickFunction('changeOwner - transact (not payable)', { types: 'address newOwner', values: '0xd9145CCE52D386f254917e481eB44e9943F39138' }) // execute the "changeOwner" function
-      .pause()
       .waitForElementContainsText('*[data-id="terminalJournal"]', 'previousOwner', 60000) // check that the script is logging the event
       .waitForElementContainsText('*[data-id="terminalJournal"]', '0x5B38Da6a701c568545dCfcB03FcB875f56beddC4', 60000) // check that the script is logging the event
       .waitForElementContainsText('*[data-id="terminalJournal"]', 'newOwner', 60000)

apps/remix-ide/src/app/panels/tab-proxy.js

@@ -174,7 +174,7 @@ export class TabProxy extends Plugin {
     this.on('fileDecorator', 'fileDecoratorsChanged', async (items) => {
       this.tabsApi.setFileDecorations(items)
     })
-    
+
     try {
       this.themeQuality = (await this.call('theme', 'currentTheme') ).quality
     } catch (e) {
@@ -240,6 +240,11 @@ export class TabProxy extends Plugin {
     if ((name.endsWith('.vy') && icon === undefined) || title.includes('Vyper')) {
       icon = 'assets/img/vyperLogo2.webp'
     }
+    if (title === 'Solidity Compile Details') {
+      icon = 'assets/img/solidity.webp'
+    }
+
+
 
     var slash = name.split('/')
     const tabPath = slash.reverse()
@@ -357,7 +362,9 @@ export class TabProxy extends Plugin {
     const onZoomIn = () => this.editor.editorFontSize(1)
     const onZoomOut = () => this.editor.editorFontSize(-1)
 
-    const onReady = (api) => { this.tabsApi = api }
+    const onReady = (api) => {
+      this.tabsApi = api
+    }
 
     this.dispatch({
       plugin: this,

apps/remix-ide/src/app/plugins/compile-details.tsx

@@ -45,7 +45,6 @@ export class CompilationDetailsPlugin extends ViewPlugin {
   async showDetails(sentPayload: any) {
     await this.call('tabs', 'focus', 'compilationDetails')
     setTimeout(() => {
-      // TODO: use the react API to render when the tab is focused and the plugin in the view.
       this.payload = sentPayload
       this.renderComponent()
     }, 2000)

libs/remix-ui/solidity-compile-details/src/lib/components/solidityCompile.tsx

@@ -29,16 +29,19 @@ export default function SolidityCompile({ contractProperties, selectedContract,
               </span>
             )
             const questionMark = (
-              <span className="remixui_questionMark">
-                <i
-                  title={intl.formatMessage({
-                    id: `solidity.${propertyName}`,
-                    defaultMessage: help[propertyName]
-                  })}
-                  className="fas fa-question-circle"
-                  aria-hidden="true"
-                ></i>
-              </span>
+              <CustomTooltip
+                tooltipText={intl.formatMessage({
+                  id: `solidity.${propertyName}`,
+                  defaultMessage: help[propertyName]
+                })}
+              >
+                <span className="remixui_questionMark">
+                  <i
+                    className="fas fa-info-circle"
+                    aria-hidden="true"
+                  ></i>
+                </span>
+              </CustomTooltip>
             )
 
             return (

libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx

@@ -77,7 +77,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
           key={keyPath}
           label={
             <div className="d-flex mt-2 flex-row remixui_label_item">
-              <label className="small font-weight-bold pr-1 remixui_label_key">{key}:</label>
+              <label className="font-weight-bold pr-1 remixui_label_key">{key}:</label>
               <label className="m-0 remixui_label_value">{typeof data.self === 'boolean' ? `${data.self}` : data.self}</label>
             </div>
           }
@@ -94,7 +94,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
           key={keyPath}
           label={
             <div className="d-flex mt-2 flex-row remixui_label_item">
-              <label className="small font-weight-bold pr-1 remixui_label_key">{key}:</label>
+              <label className="font-weight-bold pr-1 remixui_label_key">{key}:</label>
               <label className="m-0 remixui_label_value">{typeof data.self === 'boolean' ? `${data.self}` : data.self}</label>
             </div>
           }
@@ -311,25 +311,25 @@ export const ContractSelection = (props: ContractSelectionProps) => {
               </CustomTooltip>
             </button>
 
-            <button
-              data-id="compilation-details"
-              className="btn btn-secondary btn-block"
-              onClick={async () => {
-                details()
-                await (api as any).call('compilationDetails', 'showDetails', payload)
-              }}
+            <CustomTooltip
+              placement={'right-end'}
+              tooltipId="CompilationDetailsTooltip"
+              tooltipClasses="text-nowrap"
+              tooltipText={<FormattedMessage id="solidity.displayContractDetails" />}
             >
-              <CustomTooltip
-                placement={'auto-end'}
-                tooltipId="CompilationDetailsTooltip"
-                tooltipClasses="text-nowrap"
-                tooltipText={<FormattedMessage id="solidity.displayContractDetails" />}
+              <button
+                data-id="compilation-details"
+                className="btn btn-secondary btn-block"
+                onClick={async () => {
+                  details()
+                  await (api as any).call('compilationDetails', 'showDetails', payload)
+                }}
               >
                 <span>
                   <FormattedMessage id="solidity.compilationDetails" />
                 </span>
-              </CustomTooltip>
-            </button>
+              </button>
+            </CustomTooltip>
             {/* Copy to Clipboard */}
             <div className="remixui_contractHelperButtons">
               <div className="input-group">

libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx

@@ -10,7 +10,7 @@ const _paq = (window._paq = window._paq || [])
 
 /* eslint-disable-next-line */
 export interface TabsUIProps {
-  tabs: Array<any>
+  tabs: Array<Tab>
   plugin: Plugin
   onSelect: (index: number) => void
   onClose: (index: number) => void
@@ -19,6 +19,15 @@ export interface TabsUIProps {
   onReady: (api: any) => void
   themeQuality: string
 }
+
+export interface Tab {
+  id: string
+  icon: string
+  iconClass: string
+  name: string
+  title: string
+  tooltip: string
+}
 export interface TabsUIApi {
   activateTab: (name: string) => void
   active: () => string
@@ -96,7 +105,8 @@ export const TabsUI = (props: TabsUIProps) => {
     return <FileDecorationIcons file={{ path: tab.name }} fileDecorations={tabsState.fileDecorations} />
   }
 
-  const renderTab = (tab, index) => {
+  const renderTab = (tab: Tab, index) => {
+
     const classNameImg = 'my-1 mr-1 text-dark ' + tab.iconClass
     const classNameTab = 'nav-item nav-link d-flex justify-content-center align-items-center px-2 py-1 tab' + (index === currentIndexRef.current ? ' active' : '')
     const invert = props.themeQuality === 'dark' ? 'invert(1)' : 'invert(0)'

libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.css

@@ -0,0 +1,7 @@
+.remixui_mouseover {
+
+}
+
+.remixui_mouseover:hover {
+  cursor: pointer;
+}

libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx

@@ -4,29 +4,39 @@ import { TreeViewItemProps } from '../../types'
 import './tree-view-item.css'
 
 export const TreeViewItem = (props: TreeViewItemProps) => {
-  const { id, children, label, labelClass, expand, iconX = 'fas fa-caret-right', iconY = '', icon, controlBehaviour = false, innerRef, showIcon = true, ...otherProps } = props
+  const { id, children, label, labelClass, expand, iconX = 'fas fa-caret-right', iconY = 'fas fa-caret-down', icon, controlBehaviour = false, innerRef, showIcon = true, ...otherProps } = props
   const [isExpanded, setIsExpanded] = useState(false)
 
   useEffect(() => {
     setIsExpanded(expand)
   }, [expand])
 
   return (
-    <li ref={innerRef} key={`treeViewLi${id}`} data-id={`treeViewLi${id}`} className="li_tv" {...otherProps}>
+    <li
+      ref={innerRef}
+      key={`treeViewLi${id}`}
+      data-id={`treeViewLi${id}`}
+      className="li_tv remixui_mouseover"
+      {...otherProps}
+    >
       <div
         key={`treeViewDiv${id}`}
         data-id={`treeViewDiv${id}`}
         className={`d-flex flex-row align-items-center ${labelClass}`}
         onClick={() => !controlBehaviour && setIsExpanded(!isExpanded)}
       >
         {children && showIcon ? (
-          <div className={isExpanded ? `pl-2 ${iconY}` : `pl-2 ${iconX} caret caret_tv`} style={{ visibility: children ? 'visible' : 'hidden' }}></div>
+          <div className={isExpanded ? `pl-2 ${iconY}` : `pl-2 ${iconX} caret caret_tv`}
+            style={{ visibility: children ? 'visible' : 'hidden' }}
+          ></div>
         ) : icon ? (
           <div className={`pr-2 pl-2 ${icon} caret caret_tv`}></div>
         ) : null}
         <span className="w-100 ml-1 pl-2">{label}</span>
       </div>
-      {isExpanded ? children : null}
+      {isExpanded ? <div className="pl-3">
+        {children}
+      </div> : null}
     </li>
   )
 }