Merge branch 'master' into mochatest

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

@@ -220,7 +220,7 @@ class Editor extends Plugin {
           if (pathExists) {
             contentDep = await readFile(pathDep)
             if (contentDep !== '') {
-              this.emit('addModel', contentDep, 'typescript', pathDep, false)
+              this.emit('addModel', contentDep, 'typescript', pathDep, this.readOnlySessions[path])
             }
           } else {
             console.log("The file ", pathDep, " can't be found.")
@@ -241,7 +241,7 @@ class Editor extends Plugin {
   async _createSession (path, content, mode) {
     if (!this.activated) return
     
-    this.emit('addModel', content, mode, path, false)
+    this.emit('addModel', content, mode, path, this.readOnlySessions[path])
     return {
       path,
       language: mode,
@@ -266,7 +266,7 @@ class Editor extends Plugin {
   }
 
   addModel(path, content) {
-    this.emit('addModel', content, this._getMode(path), path, false)
+    this.emit('addModel', content, this._getMode(path), path, this.readOnlySessions[path])
   }
 
   /**
@@ -301,9 +301,9 @@ class Editor extends Plugin {
        - URL not prepended with the file explorer. We assume (as it is in the whole app, that this is a "browser" URL
     */
     if (!this.sessions[path]) {
+      this.readOnlySessions[path] = false
       const session = await this._createSession(path, content, this._getMode(path))
       this.sessions[path] = session
-      this.readOnlySessions[path] = false
     } else if (this.sessions[path].getValue() !== content) {
       this.sessions[path].setValue(content)
     }
@@ -317,9 +317,9 @@ class Editor extends Plugin {
    */
   async openReadOnly (path, content) {
     if (!this.sessions[path]) {
+      this.readOnlySessions[path] = true
       const session = await this._createSession(path, content, this._getMode(path))
       this.sessions[path] = session
-      this.readOnlySessions[path] = true
     }
     this._switchSession(path)
   }

apps/remix-ide/src/app/files/fileManager.ts

@@ -19,7 +19,9 @@ const profile = {
   icon: 'assets/img/fileManager.webp',
   permission: true,
   version: packageJson.version,
-  methods: ['closeAllFiles', 'closeFile', 'file', 'exists', 'open', 'writeFile', 'readFile', 'copyFile', 'copyDir', 'rename', 'mkdir', 'readdir', 'dirList', 'fileList', 'remove', 'getCurrentFile', 'getFile', 'getFolder', 'setFile', 'switchFile', 'refresh', 'getProviderOf', 'getProviderByName', 'getPathFromUrl', 'getUrlFromPath', 'saveCurrentFile', 'setBatchFiles', 'isGitRepo'],
+  methods: ['closeAllFiles', 'closeFile', 'file', 'exists', 'open', 'writeFile', 'readFile', 'copyFile', 'copyDir', 'rename', 'mkdir',
+    'readdir', 'dirList', 'fileList', 'remove', 'getCurrentFile', 'getFile', 'getFolder', 'setFile', 'switchFile', 'refresh',
+    'getProviderOf', 'getProviderByName', 'getPathFromUrl', 'getUrlFromPath', 'saveCurrentFile', 'setBatchFiles', 'isGitRepo'],
   kind: 'file-system'
 }
 const errorMsg = {

apps/remix-ide/src/app/plugins/file-decorator.ts

@@ -12,7 +12,6 @@ const profile = {
     events: ['fileDecoratorsChanged'],
     version: '0.0.1'
 }
-
 export class FileDecorator extends Plugin {
     private _fileStates: fileDecoration[] = []
     constructor() {
@@ -26,7 +25,6 @@ export class FileDecorator extends Plugin {
     }
 
     /**
-     * 
      * @param fileStates Array of file states
      */
     async setFileDecorators(fileStates: fileDecoration[] | fileDecoration) {

apps/remix-ide/src/app/tabs/settings-tab.tsx

@@ -53,19 +53,19 @@ module.exports = class SettingsTab extends ViewPlugin {
 
   render() {
     return <div id='settingsTab'>
-        <PluginViewWrapper plugin={this} />
-      </div>
+      <PluginViewWrapper plugin={this} />
+    </div>
   }
 
   updateComponent(state: any){
     return <RemixUiSettings
-    config={state.config}
-    editor={state.editor}
-    _deps={state._deps}
-    useMatomoAnalytics={state.useMatomoAnalytics}
-    themeModule = {state._deps.themeModule}
-    localeModule={state._deps.localeModule}
-  />
+      config={state.config}
+      editor={state.editor}
+      _deps={state._deps}
+      useMatomoAnalytics={state.useMatomoAnalytics}
+      themeModule = {state._deps.themeModule}
+      localeModule={state._deps.localeModule}
+    />
   }
 
   renderComponent () {

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

@@ -671,7 +671,6 @@ export const EditorUI = (props: EditorUIProps) => {
     monacoRef.current.languages.registerHoverProvider('remix-solidity', new RemixHoverProvider(props, monaco))
     monacoRef.current.languages.registerCompletionItemProvider('remix-solidity', new RemixCompletionProvider(props, monaco))
 
-    
     loadTypes(monacoRef.current)
   }
 
@@ -683,10 +682,14 @@ export const EditorUI = (props: EditorUIProps) => {
         language={editorModelsState[props.currentFile] ? editorModelsState[props.currentFile].language : 'text'}
         onMount={handleEditorDidMount}
         beforeMount={handleEditorWillMount}
-        options={{ glyphMargin: true, readOnly: (!editorRef.current || !props.currentFile) }}
+        options={{ glyphMargin: true, readOnly: ((!editorRef.current || !props.currentFile) && editorModelsState[props.currentFile]?.readOnly) }}
         defaultValue={defaultEditorValue}
       />
-
+      {editorModelsState[props.currentFile]?.readOnly && <span className='pl-4 h6 mb-0 w-100 alert-info position-absolute bottom-0 end-0'>
+        <i className="fas fa-lock-alt p-2"></i>
+          The file is opened in <b>read-only</b> mode.
+        </span>
+      }
     </div>
   )
 }

libs/remix-ui/locale-module/src/lib/remix-ui-locale-module.tsx

@@ -15,9 +15,11 @@ export function RemixUiLocaleModule({ localeModule }: RemixUiLocaleModuleProps)
   }, [localeName, localeModule])
 
   return (
-    <div className="border-top">
+    <div className="border-top mb-4">
       <div className="card-body pt-3 pb-2">
-        <h6 className="card-title"><FormattedMessage id='settings.locales' defaultMessage='Lanaguage' /></h6>
+        <h6 className="card-title">
+          <FormattedMessage id='settings.locales' defaultMessage='Lanaguage' />
+        </h6>
         <div className="card-text locales-container">
           {localeModule.getLocales()
             ? localeModule.getLocales().map((locale, idx) => (

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

@@ -350,6 +350,10 @@ export function Workspace () {
     )
   }
 
+  const formatNameForReadonly = (name: string) => {
+    return global.fs.readonly ? name + " (read-only)" : name
+  }
+
   const cloneModalMessage = () => {
     return (
       <>
@@ -607,7 +611,7 @@ export function Workspace () {
 
                 <Dropdown id="workspacesSelect" data-id="workspacesSelect" onToggle={toggleDropdown} show={showDropdown}>
                   <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control mt-1" icon={selectedWorkspace && selectedWorkspace.isGitRepo && !(currentWorkspace === LOCALHOST) ? 'far fa-code-branch' : null}>
-                    { selectedWorkspace ? selectedWorkspace.name : currentWorkspace === LOCALHOST ? 'localhost' : NO_WORKSPACE }
+                    { selectedWorkspace ? selectedWorkspace.name : currentWorkspace === LOCALHOST ? formatNameForReadonly("localhost") : NO_WORKSPACE }
                   </Dropdown.Toggle>
 
                   <Dropdown.Menu as={CustomMenu} className='w-100 custom-dropdown-items' data-id="custom-dropdown-items">