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

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

@@ -147,7 +147,7 @@ const remixIdeThemes = {
   },
   light: {
     primary: '#007aa6',
-    secondary: '#a8b3bc',
+    secondary: '#b3bcc483',
     success: '#32ba89',
     info: '#007aa6',
     warning: '#c97539',

apps/remix-ide/src/app/editor/editor.js

@@ -82,7 +82,7 @@ class Editor extends Plugin {
     ReactDOM.render(
       <EditorUI
         editorAPI={this.api}
-        theme={this.currentTheme}
+        themeType={this.currentThemeType}
         currentFile={this.currentFile}
         sourceAnnotationsPerFile={this.sourceAnnotationsPerFile}
         markerPerFile={this.markerPerFile}
@@ -107,13 +107,12 @@ class Editor extends Plugin {
       this.clearAllDecorationsFor(name)
     })
 
-    const translateTheme = (theme) => this._themes[theme.name === 'Dark' ? 'remixDark' : theme.quality]
     this.on('theme', 'themeLoaded', (theme) => {
-      this.currentTheme = translateTheme(theme)
+      this.currentThemeType = theme.quality
       this.renderComponent()
     })
     try {
-      this.currentTheme = translateTheme(await this.call('theme', 'currentTheme'))
+      this.currentThemeType = (await this.call('theme', 'currentTheme')).quality
     } catch (e) {
       console.log('unable to select the theme ' + e.message)
     }

apps/remix-ide/src/assets/css/themes/remix-black_undtds.css

@@ -21,6 +21,7 @@
   --danger: #823a3a;
   --light: #1f2020;
   --dark: #1a1a1a;
+  --text: #babbcc;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;

apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css

@@ -20,6 +20,7 @@
   --danger: #f80b0b;
   --light: #fff;
   --dark: #645fb5;
+  --text: #11556c;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;

apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css

@@ -21,6 +21,8 @@
   --danger: #b84040;
   --light: #2a2c3f;
   --dark: #222336;
+  --text: #babbcc;
+  --text-background: #222336;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;

apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css

@@ -1,7 +1,7 @@
 :root {
   --blue: #007bff;
   --indigo: #6610f2;
-  --purple: #6f42c1;
+  --purple: #d145a7;
   --pink: #e83e8c;
   --red: #dc3545;
   --orange: #fd7e14;
@@ -13,13 +13,14 @@
   --gray: #6c757d;
   --gray-dark: #343a40;
   --primary: #007aa6;
-  --secondary: #a8b3bc;
+  --secondary: #b3bcc483;
   --success: #32ba89;
   --info: #007aa6;
   --warning: #c97539;
   --danger: #b84040;
   --light: #fff;
   --dark: #f8fafe;
+  --text: #3b445e;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;

apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css

@@ -20,6 +20,7 @@
   --danger: #E64F29;
   --light: #eeede9;
   --dark: #01414E;
+  --text: #11556c;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;

apps/remix-ide/src/remixAppManager.js

@@ -11,7 +11,7 @@ const requiredModules = [ // services + layout views + system views
   'fileManager', 'contentImport', 'blockchain', 'web3Provider', 'scriptRunner', 'fetchAndCompile', 'mainPanel', 'hiddenPanel', 'sidePanel', 'menuicons',
   'filePanel', 'terminal', 'settings', 'pluginManager', 'tabs', 'udapp', 'dGitProvider', 'solidity-logic']
 
-const dependentModules = ['git', 'hardhat'] // module which shouldn't be manually activated (e.g git is activated by remixd)
+const dependentModules = ['git', 'hardhat', 'slither'] // module which shouldn't be manually activated (e.g git is activated by remixd)
 
 export function isNative (name) {
   const nativePlugins = ['vyper', 'workshops', 'debugger', 'remixd', 'menuicons', 'solidity', 'hardhat-provider', 'solidityStaticAnalysis', 'solidityUnitTesting']

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

@@ -47,7 +47,7 @@ type sourceMarkerMap = {
 /* eslint-disable-next-line */
 export interface EditorUIProps {
   activated: boolean
-  theme: string
+  themeType: string
   currentFile: string
   sourceAnnotationsPerFile: sourceAnnotationMap
   markerPerFile: sourceMarkerMap
@@ -60,7 +60,7 @@ export interface EditorUIProps {
   plugin: {
     on: (plugin: string, event: string, listener: any) => void
   }
-  editorAPI:{
+  editorAPI: {
     findMatches: (uri: string, value: string) => any
     getFontSize: () => number,
     getValue: (uri: string) => string
@@ -78,38 +78,122 @@ export const EditorUI = (props: EditorUIProps) => {
 
   const [editorModelsState, dispatch] = useReducer(reducerActions, initialState)
 
-  const defineAndSetDarkTheme = (monaco) => {
+  const formatColor = (name) => {
+    let color = window.getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+    if (color.length === 4) {
+      color = color.concat(color.substr(1))
+    }
+    return color
+  }
+  const defineAndSetTheme = (monaco) => {
+    const themeType = props.themeType === 'dark' ? 'vs-dark' : 'vs'
+    const themeName = props.themeType === 'dark' ? 'remix-dark' : 'remix-light'
     // see https://microsoft.github.io/monaco-editor/playground.html#customizing-the-appearence-exposed-colors
-    const lightColor = window.getComputedStyle(document.documentElement).getPropertyValue('--light').trim()
-    const infoColor = window.getComputedStyle(document.documentElement).getPropertyValue('--info').trim()
-    const darkColor = window.getComputedStyle(document.documentElement).getPropertyValue('--dark').trim()
-    const grayColor = window.getComputedStyle(document.documentElement).getPropertyValue('--gray-dark').trim()
-    monaco.editor.defineTheme('remix-dark', {
-      base: 'vs-dark',
+    const lightColor = formatColor('--light')
+    const infoColor = formatColor('--info')
+    const darkColor = formatColor('--dark')
+    const secondaryColor = formatColor('--secondary')
+    const textColor = formatColor('--text') || darkColor
+    const textbackground = formatColor('--text-background') || lightColor
+
+    const blueColor = formatColor('--blue')
+    const successColor = formatColor('--success')
+    const warningColor = formatColor('--warning')
+    const yellowColor = formatColor('--yellow')
+    const pinkColor = formatColor('--pink')
+    const locationColor = '#9e7e08'
+    const purpleColor = formatColor('--purple')
+    const dangerColor = formatColor('--danger')
+
+    monaco.editor.defineTheme(themeName, {
+      base: themeType,
       inherit: true, // can also be false to completely replace the builtin rules
       rules: [
         { background: darkColor.replace('#', '') },
-        { token: 'keyword.external', foreground: infoColor }
+        { foreground: textColor.replace('#', '') },
+
+        // global variables
+        { token: 'keyword.abi', foreground: blueColor },
+        { token: 'keyword.block', foreground: blueColor },
+        { token: 'keyword.bytes', foreground: blueColor },
+        { token: 'keyword.msg', foreground: blueColor },
+        { token: 'keyword.tx', foreground: blueColor },
+
+        // global functions
+        { token: 'keyword.assert', foreground: blueColor },
+        { token: 'keyword.require', foreground: blueColor },
+        { token: 'keyword.revert', foreground: blueColor },
+        { token: 'keyword.blockhash', foreground: blueColor },
+        { token: 'keyword.keccak256', foreground: blueColor },
+        { token: 'keyword.sha256', foreground: blueColor },
+        { token: 'keyword.ripemd160', foreground: blueColor },
+        { token: 'keyword.ecrecover', foreground: blueColor },
+        { token: 'keyword.addmod', foreground: blueColor },
+        { token: 'keyword.mulmod', foreground: blueColor },
+        { token: 'keyword.selfdestruct', foreground: blueColor },
+        { token: 'keyword.type ', foreground: blueColor },
+        { token: 'keyword.gasleft', foreground: blueColor },
+
+        // specials
+        { token: 'keyword.super', foreground: infoColor },
+        { token: 'keyword.this', foreground: infoColor },
+
+        // for state variables
+        { token: 'keyword.constants', foreground: warningColor },
+        { token: 'keyword.override', foreground: warningColor },
+        { token: 'keyword.immutable', foreground: warningColor },
+
+        // data location
+        { token: 'keyword.memory', foreground: locationColor },
+        { token: 'keyword.storage', foreground: locationColor },
+        { token: 'keyword.calldata', foreground: locationColor },
+
+        // // forf functions and modifiers
+        { token: 'keyword.virtual', foreground: purpleColor },
+
+        // // for Events
+        { token: 'keyword.indexed', foreground: yellowColor },
+        { token: 'keyword.anonymous', foreground: yellowColor },
+
+        // // for functions
+        { token: 'keyword.external', foreground: successColor },
+        { token: 'keyword.internal', foreground: successColor },
+        { token: 'keyword.private', foreground: successColor },
+        { token: 'keyword.public', foreground: successColor },
+        { token: 'keyword.view', foreground: successColor },
+        { token: 'keyword.pure', foreground: successColor },
+        { token: 'keyword.payable', foreground: successColor },
+        { token: 'keyword.nonpayable', foreground: successColor },
+
+        // Errors
+        { token: 'keyword.Error', foreground: dangerColor },
+        { token: 'keyword.Panic', foreground: dangerColor },
+
+        // special functions
+        { token: 'keyword.fallback', foreground: pinkColor },
+        { token: 'keyword.receive', foreground: pinkColor },
+        { token: 'keyword.constructor', foreground: pinkColor }
+
       ],
       colors: {
-        'editor.background': darkColor,
+        // see https://code.visualstudio.com/api/references/theme-color for more settings
+        'editor.background': textbackground,
         'editorSuggestWidget.background': lightColor,
         'editorSuggestWidget.selectedBackground': lightColor,
         'editorSuggestWidget.highlightForeground': infoColor,
-        'editor.lineHighlightBorder': lightColor,
-        'editor.lineHighlightBackground': grayColor,
-        'editorGutter.background': lightColor
+        'editor.lineHighlightBorder': secondaryColor,
+        'editor.lineHighlightBackground': textbackground === darkColor ? lightColor : secondaryColor,
+        'editorGutter.background': lightColor,
+        'minimap.background': lightColor
       }
     })
-    monacoRef.current.editor.setTheme('remix-dark')
+    monacoRef.current.editor.setTheme(themeName)
   }
 
   useEffect(() => {
     if (!monacoRef.current) return
-    if (props.theme === 'remix-dark') {
-      defineAndSetDarkTheme(monacoRef.current)
-    } else monacoRef.current.editor.setTheme(props.theme)
-  }, [props.theme])
+    defineAndSetTheme(monacoRef.current)
+  })
 
   const setAnnotationsbyFile = (uri) => {
     if (props.sourceAnnotationsPerFile[uri]) {
@@ -236,9 +320,7 @@ export const EditorUI = (props: EditorUIProps) => {
 
   function handleEditorDidMount (editor) {
     editorRef.current = editor
-    if (props.theme === 'remix-dark') {
-      defineAndSetDarkTheme(monacoRef.current)
-    } else monacoRef.current.editor.setTheme(props.theme)
+    defineAndSetTheme(monacoRef.current)
     reducerListener(props.plugin, dispatch, monacoRef.current, editorRef.current, props.events)
     props.events.onEditorMounted()
     editor.onMouseUp((e) => {
@@ -270,7 +352,7 @@ export const EditorUI = (props: EditorUIProps) => {
       language={editorModelsState[props.currentFile] ? editorModelsState[props.currentFile].language : 'text'}
       onMount={handleEditorDidMount}
       beforeMount={handleEditorWillMount}
-      options= { { glyphMargin: true } }
+      options={{ glyphMargin: true }}
     />
   )
 }

libs/remix-ui/editor/src/lib/syntax.ts

@@ -1214,21 +1214,58 @@ export const language = {
     'ufixed240x16',
     'ufixed248x8',
     'event',
+    'emit',
     'enum',
     'let',
     'mapping',
     'private',
     'public',
     'external',
+    'internal',
+    'indexed',
+    'anonymous',
+    'isOwner',
     'view',
     'pure',
     'inherited',
+    'storage',
+    'memory',
+    'virtual',
+    'calldata',
+    'override',
+    'abstract',
     'payable',
+    'nonpayable',
+    'constants',
+    'immutable',
+    'assert',
+    'require',
+    'revert',
+    'blockhash',
+    'keccak256',
+    'sha256',
+    'ripemd160',
+    'ecrecover',
+    'addmod',
+    'mulmod',
+    'selfdestruct',
+    'type',
+    'gasleft',
+    'abi',
+    'block',
+    'bytes',
+    'msg',
+    'tx',
+    'Error',
+    'Panic',
+    'exceptions',
     'true',
     'false',
     'var',
     'import',
     'constant',
+    'fallback',
+    'receive',
     'if',
     'else',
     'for',
@@ -1245,7 +1282,9 @@ export const language = {
     'new',
     'is',
     'this',
-    'super'
+    'super',
+    'try',
+    'catch'
   ],
 
   operators: [