Merge branch 'master' of https://github.com/ethereum/remix-project into panels

apps/remix-ide-e2e/src/tests/solidityImport_group1.spec.ts

@@ -1,6 +0,0 @@
-'use strict'
-import * as test from './solidityImport.test'
-import buildGroupTest from '../helpers/buildgrouptest'
-const group = 'group1'
-
-module.exports = buildGroupTest(group, test)

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

@@ -27,6 +27,6 @@ module.exports = {
       .click('*[id="menuitemdeactivate"]')
       .click('*[data-id="verticalIconsKindsettings"]')
       .click('*[data-id="verticalIconsKindpluginManager"]')
-      .waitForElementVisible('*[data-id="pluginManagerComponentActivateButtondebugPlugin"]')
+      .waitForElementVisible('*[data-id="pluginManagerComponentActivateButtondebugger"]')
   }
 }

apps/remix-ide/src/app/tabs/plugin-tab.js

@@ -1,22 +0,0 @@
-var yo = require('yo-yo')
-var css = require('./styles/plugin-tab-styles')
-
-class PluginTab {
-  constructor (json) {
-    this.el = null
-    this.data = { json }
-  }
-
-  render () {
-    if (this.el) return this.el
-
-    this.el = yo`
-      <div class="${css.pluginTabView}" id="pluginView">
-        <iframe class="${css.iframe}" src="${this.data.json.url}/index.html"></iframe>
-      </div>`
-
-    return this.el
-  }
-}
-
-module.exports = PluginTab

libs/remix-ui/editor-context-view/src/index.ts

@@ -1 +1 @@
-export * from './lib/remix-ui-editor-context-view';
+export * from './lib/remix-ui-editor-context-view'

libs/remix-ui/editor-context-view/src/lib/remix-ui-editor-context-view.tsx

@@ -38,15 +38,13 @@ export interface RemixUiEditorContextViewProps {
 
 function isDefinition (node: any) {
   return node.nodeType === 'ContractDefinition' ||
-  node.nodeType === 'FunctionDefinition' ||
+    node.nodeType === 'FunctionDefinition' ||
-  node.nodeType === 'ModifierDefinition' ||
+    node.nodeType === 'ModifierDefinition' ||
-  node.nodeType === 'VariableDeclaration' ||
+    node.nodeType === 'VariableDeclaration' ||
-  node.nodeType === 'StructDefinition' ||
+    node.nodeType === 'StructDefinition' ||
-  node.nodeType === 'EventDefinition'
+    node.nodeType === 'EventDefinition'
 }
 
-
-
 type nullableAstNode = astNode | null
 
 export function RemixUiEditorContextView (props: RemixUiEditorContextViewProps) {
@@ -90,7 +88,7 @@ export function RemixUiEditorContextView (props: RemixUiEditorContextViewProps)
           gasEstimation = await props.gasEstimation(currentNode)
         }
       }
-      let activeHighlights = await props.getActiveHighlights()
+      const activeHighlights = await props.getActiveHighlights()
       setState(prevState => {
         return { ...prevState, nodes, references, activeHighlights, currentNode, gasEstimation }
       })

libs/remix-ui/terminal/src/lib/remix-ui-terminal.css

@@ -202,6 +202,7 @@ element.style {
     bottom           : 1em;
     border-width     : 4px;
     left             : 2em;
+    overflow-y       : scroll;
   }
 
   .autoCompleteItem {

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

@@ -367,6 +367,12 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
     }
   }
 
+  const handleClickSelect = (item: string) => {
+    const result: string = getKeyOf(item) as string || getValueOf(item) as string
+    setAutoCompleteState(prevState => ({ ...prevState, showSuggestions: false, userInput: result }))
+    inputEl.current.focus()
+  }
+
   const handleSelect = (event) => {
     const suggestionCount = autoCompletState.activeSuggestion
     if (event.keyCode === 38) {
@@ -402,11 +408,11 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   }
 
   const handleAutoComplete = () => (
-    <div className='popup alert alert-secondary' style={{ display: (autoCompletState.showSuggestions && autoCompletState.userInput !== '') && autoCompletState.data._options.length > 0 ? 'block' : 'none' }}>
+    <div className='popup alert alert-secondary' style={{ display: (autoCompletState.showSuggestions && autoCompletState.userInput !== '' && (autoCompletState.userInput.length > 2)) && autoCompletState.data._options.length > 0 ? 'block' : 'none' }}>
       <div>
         {autoCompletState.data._options.map((item, index) => {
           return (
-            <div key={index} data-id="autoCompletePopUpAutoCompleteItem" className={`autoCompleteItem listHandlerShow item ${autoCompletState.data._options[autoCompletState.activeSuggestion] === item ? 'border border-primary ' : ''}`} onKeyDown={ handleSelect } >
+            <div key={index} data-id="autoCompletePopUpAutoCompleteItem" className={`autoCompleteItem listHandlerShow item ${autoCompletState.data._options[autoCompletState.activeSuggestion] === item ? 'border border-primary ' : ''}`} onKeyDown={ handleSelect } onClick={() => handleClickSelect(item)}>
               <div>
                 {getKeyOf(item)}
               </div>

libs/remix-ui/vertical-icons-panel/src/lib/components/RequiredSection.tsx

@@ -26,31 +26,31 @@ function RequiredSection ({ verticalIconsPlugin, itemContextAction, addActive, r
         removeActive={removeActive}
         itemContextAction={itemContextAction}
       />
-      <PluginManager
+      <Solidity
         verticalIconsPlugin={verticalIconsPlugin}
         addActive={addActive}
         removeActive={removeActive}
         itemContextAction={itemContextAction}
       />
-      <Solidity
+      <Udapp
         verticalIconsPlugin={verticalIconsPlugin}
         addActive={addActive}
         removeActive={removeActive}
         itemContextAction={itemContextAction}
       />
-      <Udapp
+      <SolidityStaticAnalysis
         verticalIconsPlugin={verticalIconsPlugin}
         addActive={addActive}
         removeActive={removeActive}
         itemContextAction={itemContextAction}
       />
-      <SolidityStaticAnalysis
+      <Debugger
         verticalIconsPlugin={verticalIconsPlugin}
         addActive={addActive}
         removeActive={removeActive}
         itemContextAction={itemContextAction}
       />
-      <Debugger
+      <PluginManager
         verticalIconsPlugin={verticalIconsPlugin}
         addActive={addActive}
         removeActive={removeActive}

libs/remix-ui/vertical-icons-panel/src/lib/reducers/verticalScrollReducer.ts

@@ -0,0 +1,14 @@
+
+export type actionType = {
+  type: 'resize' | 'other'
+  payload: any
+}
+
+export function verticalScrollReducer (prevState: any, actionPayload: actionType) {
+  if (actionPayload.type === 'resize') {
+    let { scrollHeight, clientHeight, scrollState } = actionPayload.payload
+    if (scrollHeight > clientHeight) scrollState = true
+    return { scrollHeight, clientHeight, scrollState }
+  }
+  return prevState
+}

libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx

@@ -3,7 +3,9 @@
 import React, {
   Fragment,
   useEffect,
-  useRef
+  useReducer,
+  useRef,
+  useState
 } from 'react'
 
 import './remix-ui-vertical-icons-panel.css'
@@ -12,17 +14,44 @@ import { VerticalIcons } from '../../types/vertical-icons-panel'
 import Home from './components/Home'
 import Settings from './components/Settings'
 import { RequiredSection } from './components/RequiredSection'
+import { verticalScrollReducer } from './reducers/verticalScrollReducer'
 export interface RemixUiVerticalIconsPanelProps {
   verticalIconsPlugin: VerticalIcons
 }
 
 let scrollHeight: any
 
+const initialState = {
+  scrollHeight: 0,
+  clientHeight: 0,
+  scrollState: false
+}
+
 export function RemixUiVerticalIconsPanel ({
   verticalIconsPlugin
 }: RemixUiVerticalIconsPanelProps) {
   const scrollableRef = useRef<any>()
   const iconPanelRef = useRef<any>()
+  const [activateScroll, dispatchScrollAction] = useReducer(verticalScrollReducer, initialState)
+
+  useEffect(() => {
+    const evaluateScrollability = (evt: any) => {
+      console.log('resize event answered by dispatch!')
+      dispatchScrollAction({
+        type: 'resize',
+        payload: {
+          scrollHeight: document.querySelector('#remixuiScrollable')?.scrollHeight,
+          clientHeight: document.querySelector('#remixuiScrollable')?.clientHeight,
+          scrollState: false
+        }
+      })
+    }
+    addEventListener('resize', evaluateScrollability)
+
+    return () => {
+      removeEventListener('resize', evaluateScrollability)
+    }
+  })
 
   function onThemeChanged (themeType: any) {
     const invert = themeType === 'dark' ? 1 : 0
@@ -51,6 +80,7 @@ export function RemixUiVerticalIconsPanel ({
   }
 
   function addActive (name: string) {
+    console.log('addactive has been called now.')
     if (name === 'home') return
     const themeType = verticalIconsPlugin.registry.get('themeModule').api.currentTheme().quality
     const invert = themeType === 'dark' ? 1 : 0
@@ -98,7 +128,7 @@ export function RemixUiVerticalIconsPanel ({
       <div className="remixui_icons d-flex flex-column vh-100" ref={iconPanelRef}>
         <Home verticalIconPlugin={verticalIconsPlugin} />
         <div className={scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight
-          ? 'remixui_default-icons-container remixui_requiredSection' : 'remixui_requiredSection'}>
+          ? 'remixui_default-icons-container remixui_requiredSection' : activateScroll && activateScroll.scrollState ? 'remixui_default-icons-container remixui_requiredSection' : 'remixui_requiredSection'}>
           <RequiredSection
             verticalIconsPlugin={verticalIconsPlugin}
             addActive={addActive}
@@ -111,7 +141,7 @@ export function RemixUiVerticalIconsPanel ({
           id="remixuiScrollable"
           className={scrollableRef.current && scrollableRef.current.scrollHeight > scrollableRef.current.clientHeight
             ? 'remixui_default-icons-container remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'
-            : 'remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'}
+            : activateScroll && activateScroll.scrollState ? 'remixui_default-icons-container remixui_scrollable-container remixui_scrollbar remixui_hide-scroll' : 'remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'}
           ref={scrollableRef}
         >
           <OtherIcons