Merge pull request #1187 from ethereum/docsNewLayout

Docs new layout

docs/compile.md

@@ -0,0 +1,28 @@
+Compiler (Solidity)
+===================
+
+Clicking the Solidity icon in the icon panel brings you to the Solidty Compiler.
+
+Compiling is triggered when you click the compile button ( **A. in image below**). If you want the file to be compiled each time the file is saved or when another file is selected - check the auto compile checkbox ( **B. in image below**).  
+
+If the contract has a lot of dependencies it can take a while to compile - so you use autocompilation at your discretion.
+
+![](images/a-sol-compiler.png)
+
+After each compilation, a list is updated with all the newly compiled
+contracts.  The contract compiled can be selected with the Contract pulldown menu ( **C. in image below**).  Multiple contracts are compiled when one contract imports other contracts.  Selecting a contract will show information about that one.
+
+When the "Compilation Details" button is clicked ( **D. in image below**), a modal opens displaying detailed information about the current selected contract.
+
+From this tab, you can also publish your contract to Swarm (only non
+abstract contracts can be published).
+
+Published data notably contains the `abi` and solidity source code.
+
+After a contract is published, you can find its metadata information
+using the bzz URL located in the details modal dialog `SWARM LOCATION`.
+
+Compilation Errors and Warning are displayed below the contract section.
+At each compilation, the static analysis tab builds a report. It is very
+valuable when addressing reported issues even if the compiler doesn't
+complain. ([see more](static_analysis.html))

docs/compile_tab.md

@@ -1,28 +0,0 @@
-Compiling contracts
-===================
-
-By default Remix triggers a compilation each time the current file is
-changed or another file is selected. If the contract has a lot of
-dependencies and takes a long time to compile, it is possible to disable
-the autocompilation.
-
-![image](images/remix_compiletab.png)
-
-After each compilation, a list is updated with all the newly compiled
-contracts.
-
-Details modal dialog displays detailed information about the current
-selected contract.
-
-From this tab, you can also publish your contract to Swarm (only non
-abstract contracts can be published).
-
-Published data notably contains the `abi` and solidity source code.
-
-After a contract is published, you can find its metadata information
-using the bzz URL located in the details modal dialog `SWARM LOCATION`.
-
-Compilation Errors and Warning are displayed below the contract section.
-At each compilation, the static analysis tab builds a report. It is very
-valuable when addressing reported issues even if the compiler doesn't
-complain. ([see more](http://remix.readthedocs.io/en/latest/analysis_tab.html))

docs/create_deploy.md

@@ -1,5 +1,5 @@
-Quick Start using the JavaScript VM
+Creating and Deploying a Contract
-===================================
+================================
 
 There are 3 type of environments Remix can be plugged to:
 `Javascript VM`, `Injected provider`, or `Web3 provider`. (for details see [Running transactions](http://remix.readthedocs.io/en/latest/run_tab.html))
@@ -7,15 +7,17 @@ There are 3 type of environments Remix can be plugged to:
 Both `Web3 provider` and `Injected provider` require the use of an
 external tool.
 
-The external tool for `Web3 provider` is an Ethereum node the tools for
+The external tool for `Web3 provider` is an Ethereum node and for
-`Injected provider` are Mist or Metamask.
+`Injected provider` Metamask.
 
 The `JavaScript VM` mode is convenient because each execution runs in
-your browser. Thus reloading the page will restart Remix with an empty
+your browser and you don't need any other software or Ethereum node to run it. 
-state.
+
+So, it is the easiest test environment - **no setup required!**
+
+But keep in mind that reloading the browser when you are in the Javascript VM will restart Remix in an empty state.
 
-So for performance purposes, it might also be better to use an external
+For performance purposes ( which is to say - for testing in an environment that is closest to the mainnet), it might also be better to use an external node.
-node.
 
 Selecting the VM mode
 ---------------------
@@ -26,28 +28,31 @@ should have 100 ether.
 Sample contract
 ---------------
 
-``` {.sourceCode .none}
+``` 
-pragma solidity ^0.4.16;
+{.sourceCode .none}
+pragma solidity ^0.5.1;
 
 contract testContract {
 
     uint value;
-    function testContract(uint _p) {
+
+    constructor (uint _p) public {
         value = _p;
     }
 
-    function setP(uint _n) payable {
+    function setP(uint _n) payable public {
         value = _n;
     }
 
-    function setNP(uint _n) {
+    function setNP(uint _n) public {
         value = _n;
     }
 
-    function get () constant returns (uint) {
+    function get () view public returns (uint) {
         return value;
     }
 }
+
 ```
 
 This contract is very basic. The goal is to quickly start to create and
@@ -63,12 +68,12 @@ Moving on, in the `Run tab` select, `JavaScript VM` to specify that you
 are going to deploy an instance of the contract in the `JavaScript VM`
 state.
 
-![image](images/remix_quickstart_javascriptvm_creation.png)
+![](images/a-jvm.png)
 
-The constructor of `testContract` needs a parameter (of type `uint`).
+The constructor of `Ballot.sol` needs a parameter (of type `uint8`).
-Give any value and click on `Create`.
+Give any value and click on `Deploy`.
 
-The transaction which deploys the instance of `testContract` is created.
+The transaction which deploys the instance of `Ballot` is created.
 
 In a "normal" blockchain, it can take several seconds to execute. This
 is the time for the transaction to be mined. However, because we are
@@ -79,7 +84,7 @@ there and start debugging.
 
 The newly created instance is displayed in the `run tab`.
 
-![image](images/remix_quickstart_javascriptvm_creationTransaction.png)
+![](images/a-jvm-instance.png)
 
 Interacting with an instance
 ----------------------------
@@ -88,17 +93,16 @@ This new instance contains 3 actions which corresponds to the 3
 functions (`setP`, `setPN`, `get`). Clicking on `SetP` or `SetPN` will
 create a new transaction.
 
-Note that `SetP` is `payable` (red action) : it is possible to send
+Note that `SetP` is `payable` (red button) : it is possible to send
 value (Ether) to the contract.
 
-`SetPN` is not payable (light red action) : it is not possible to send
+`SetPN` is not payable (orange button - depending on the theme) : it is not possible to send
 value (Ether) to the contract.
 
-Clicking on `get` will not execute a transaction (blue action). It is
+Clicking on `get` will not execute a transaction (usually its a blue button - depending on the theme). It doesn't execute a transaction because a `get` does not modify the state (variable
-not necessary to do so because `get` does not modify the state (variable
 `value`) of this instance.
 
-As `get` is `constant` you can see the return value just below the
+As `get` is `view` you can see the return value just below the
 action.
 
-![image](images/remix_quickstart_javascriptvm_callinginstance.png)
+![](images/a-jvm-calling-instance.png)

docs/debugger.md

@@ -0,0 +1,12 @@
+Debugger
+========
+
+This module allows you to debug the transaction. It can be used to
+deploy transactions created from Remix and already mined transactions.
+(debugging works only if the current environment provides the necessary
+features).  
+
+To get to the debugger - you can click the debug button in the terminal when a successful or failed transaction appears there.  You can also load the module from the plugin manager and then click the bug in the icon panel.  Or you can get to the debugger by running the debug command in the console. 
+
+
+![](images/a-debugger.png)

docs/debugger_tab.md

@@ -1,12 +0,0 @@
-Debugging
-=========
-
-This module allows you to debug the transaction. It can be used to
-deploy transactions created from Remix and already mined transactions.
-(debugging works only if the current environment provides the necessary
-features).
-
-![image](images/remix_debuggertab.png)
-
-For more information about debugging, see the [Tutorial on debugging transactions with Remix
-](http://remix.readthedocs.io/en/latest/tutorial_debug.html)

docs/file_explorer.md

@@ -1,18 +1,20 @@
 File Explorer
 =============
 
+To get to the file explorers - click the file explorers icon.
+
+![](images/a-file-explorer1.png)
+
 The file explorer lists by default all the files stored in your browser.
 You can see them in the browser folder. You can always rename, remove or
 add new files to the file explorer.
 
-![image](images/remix_file_explorer_browser.png)
-
 Note that clearing the browser storage will permanently delete all the
 solidity files you wrote. To avoid this, you can use Remixd, which
 enables you to store and sync files in the browser with your local
-computer (for more information see ../tutorial\_remixd\_filesystem)
+computer ( for more information see [remixd](remixd.html) ).
 
-![image](images/remix_file_explorer_menu.png)
+![](images/a-file-explorer-buttons.png)
 
 We will start by reviewing at the icons at the top left - from left to
 the right:
@@ -49,4 +51,4 @@ Connect your filesystem to Remix
 --------------------
 
 Allows to sync between Remix and your local file system (see
-[more about RemixD](http://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html)).
+[more about RemixD](remixd.html)).

docs/import.md

@@ -0,0 +1,39 @@
+Importing Source Files in Solidity
+==================================
+
+It is essential to know all many techniques for importing files.
+
+For a tutorial about importing files see this [tutorial](https://github.com/ethereum/remix-workshops/tree/master/loading_via_npm_github_plugin).
+
+For a detailed explanation of the `import` keyword see the
+[Solidity documentation](https://solidity.readthedocs.io/en/develop/layout-of-source-files.html?highlight=import#importing-other-source-files)
+
+Here are a some of the main methods of importing a file:
+
+Importing a file from the browser's local storage
+-------------------------------------------------
+
+Files in Remix can be imported just by specifying their path. Please use ./ for relative paths to increase portability.
+![](images/a-old-tuto_basicimport.png)
+
+Importing a file from your computer's filesystem
+-------------------------------------------------
+
+This method uses **remixd** - the remix daemon.  Please go to the [remixd tutorial](remixd.html) for instructions about how to bridge the divide between the browser and your computers filesystem.
+
+
+Importing from GitHub
+---------------------
+
+It is possible to import files directly from GitHub with URLs like
+`https://github.com/<owner>/<repo>/<path to the file>`.
+
+![](images/a-old-tuto_importgit.png)
+
+Importing from Swarm
+--------------------
+
+Files can be imported using all URLs supported by swarm. If you do not
+have a swarm node, then use swarm-gateways.net.
+
+![](images/a-old-tuto_importswarm.png)

docs/index.rst

@@ -25,51 +25,64 @@ Useful links:
 
 - `Ðapp Developer resources (Ethereum wiki) <https://github.com/ethereum/wiki/wiki/Dapp-Developer-Resources>`__
 
+.. toctree::
+   :maxdepth: 2
+   :caption: New Layout Intro
+
+   layout
 
 .. toctree::
    :maxdepth: 2
-   :caption: Quick start
+   :caption: Tour of default modules
 
-   packages
+   file_explorer
+   plugin_manager
+   settings
    solidity_editor
-   compile_tab
+   terminal
-   quickstart_javascript_vm
-   settings_tab
-
 
 .. toctree::
    :maxdepth: 2
-   :caption: Deploy and test
+   :caption: Tour of typical solidity modules
 
-   run_tab
+   compile
+   run
    udapp
+   debugger
+   static_analysis
+
+.. toctree::
+   :maxdepth: 2
+   :caption: Using Remix
+   
    contract_metadata
-   unittesting_tab
+   create_deploy
+   import
+   remixd
+   unittesting
    
 .. toctree::
    :maxdepth: 2
-   :caption: Other Remix features
+   :caption: Building Plugins
 
-   file_explorer
+   remix_plugin.md
-   debugger_tab
+
-   analysis_tab
+.. toctree::
-   terminal
+   :maxdepth: 2
+   :caption: URLs & Downloads
+
+   locations
 
 .. toctree::
    :maxdepth: 2
-   :caption: Tutorials and workshops
+   :caption: Tutorials and workshops slides
 
-   workshop_Building_smart_contracts_with_Remix
+   remix_tutorials_github
-   tutorial_eattheblock
-   tutorial_remixd_filesystem
-   tutorial_debug
-   tutorial_import
-   tutorial_mist
 
 .. toctree::
    :maxdepth: 2
    :caption: Code contribution guide
 
    code_contribution_guide
-   Community
+   community
-   support_tab
+   support

docs/layout.md

@@ -0,0 +1,54 @@
+Remix-IDE Layout
+==============
+
+The new structure
+--------------------
+![](images/a-layout1b.png)
+
+1. Icon Panel - click to change which plugin appears in the Swap Panel
+2. Swap Panel - Most but not all plugins will have their GUI here.
+3. Main Panel - In the old layout this was just for editing files.  In the tabs can be plugins or files for the IDE to compile.
+4. Terminal - where you will see the results of your interactions with the GUI's.  Also you can run scripts here.
+
+Icon Panel at Page Load
+-----------------------
+When you load remix - the icon panel show these icons by default.
+
+![](images/a-icons-at-load.png)
+
+Everything in remix is now a plugin...  so the **[Plugin Manager](#plugin-manager)** is very important.
+In the old layout, each basic task in remix was separated into the tabs.  Now these tabs are plugins.  
+
+But to activate a half a dozen plugins - (or however many you are using) each time the page load is **tedious**.  So learn about the **[Environments](#environments)**.
+
+Homepage
+--------
+
+![](images/a-hometab.png)
+
+The homepage is located in a tab in the Main Panel.  
+
+You can also get there by clicking the remix logo at the top of the icon panel.
+
+### Environments
+Clicking on one of the environment buttons loads up a collection of plugins.  We currently have a **Solidity** Button and a **Vyper** button.  In the future you will be able to save your own environment.
+
+To see all the plugins go to the **plugin manager** - by selecting the plug in the icon panel. 
+![](images/a-plug.png) 
+
+The environment buttons are time & sanity savers - so you don't need to go to the plugin manager to get started everytime you load the page.   
+
+
+Plugin Manager
+---------------
+
+In order to make Remix flexible for integrating changes into its functionality and for integrating remix into other projects (your's for example), we've now made everything a plugin.  This means that you only load the functionality you need.  It also means that you need a place to turn off and on plugins - as your needs change.  This all happens in the plug manager.  
+
+The Plugin Manager is also the place you go when you are creating your own plugin and you want to load your local plugin into Remix. In that case you'd click on the "Connect to a Local Plugin" link at the top of the Plugin Manager panel.
+
+Themes
+---------------
+
+So you want to work on Remix with a dark theme or a gray theme or just a different theme that the one you are currently looking at?  Go to the settings tab and at the bottom is a choice of lots of bootstrap based themes.
+
+![](images/a-themes.png) 

docs/locations.md

@@ -1,13 +1,10 @@
-Packages
+Finding Remix
-========
+=============
 
-This part focuses on using `Remix IDE`, which is a browser based smart contract IDE. We will basically answer the question: 
+So if you've found the documentation to Remix but don't know where to find Remix or if you want to run the remix-ide locally and want to find out where to download it - this page is here to help.
-Where can I use / download `Remix IDE`, and what is the difference between packages?
 
 - An online version is available at [https://remix.ethereum.org](https://remix.ethereum.org). This version is stable and is updated at almost every release.
 - An alpha online version is available at [https://remix-alpha.ethereum.org](https://remix-alpha.ethereum.org). This is not a stable version.
 - npm `remix-ide` package `npm install remix-ide -g`. `remix-ide` create a new instance of `Remix IDE` available at [http://127.0.0.1:8080](http://127.0.0.1:8080) and make the current folder available to Remix IDE by automatically starting `remixd`.
 see [Connection to `remixd`](http://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html) for more information about sharing local file with `Remix IDE`.
 - Github release: [https://github.com/ethereum/remix-ide/releases](https://github.com/ethereum/remix-ide/releases) . The source code is packaged at every release but still need to be built using `npm run build`.
-- Mist: `Remix IDE` can be started and use the local geth node from `Mist` [https://github.com/ethereum/mist/releases](https://github.com/ethereum/mist/releases)
-- Electron: `Remix IDE` wrapped as an Electron app is available at [https://github.com/horizon-games/remix-app](https://github.com/horizon-games/remix-app)

docs/plugin_manager.md

@@ -0,0 +1,8 @@
+Plugin Manager
+===================
+
+** This is text copied from layout.md - it needs an image & more info about connect to the local plugin
+
+In order to make Remix flexible for integrating changes into its functionality and for integrating remix into other projects (your's for example), we've now made everything a plugin.  This means that you only load the functionality you need.  It also means that you need a place to turn off and on plugins - as your needs change.  This all happens in the plug manager.  
+
+The Plugin Manager is also the place you go when you are creating your own plugin and you want to load your local plugin into Remix. In that case you'd click on the "Connect to a Local Plugin" link at the top of the Plugin Manager panel.

docs/remix_plugin.md

@@ -1,101 +1,4 @@
-Remix Plugin API
+Remix Plugin 
-================
+============
 
-This section provides informations about developing plugin for Remix.
+The best documentation about how to build a plugin is currently in [the readme of remix-plugin repo](https://github.com/ethereum/remix-plugin).  Please go [here](https://github.com/ethereum/remix-plugin) to learn all about it.
-
-Introduction
-------------
-
-A plugin is basically a front end interface loaded through an iframe. Plugins have access to remix main features through an API.
-This API consist of `notification` and `request` messages built over iframe messages (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)
-plugin resources (html, js, img, ...) needs to have their own hosting, either using normal web or using decentralized infrastructure like Swarm and IPFS.
-
-A plugin declaration is a JSON value which contains the properties `url` and `title`.
-
-```
-{
-    "title": "<plugin name>",
-    "url": "<plugin url>"
-}
-``` 
-
-
-Loading / Registering a plugin in Remix IDE can be done:
-
- - Creating a PR which add a new entry: https://github.com/ethereum/remix-ide/blob/master/src/app/plugin/plugins.js , the plugin can then be loaded directly from remix IDE with a single click.
- - In the settings tab, paste a plugin declaration in the plugin section and hit load.
- - Load Remix IDE with the following url parameters: `pluginurl` and `plugintitle`
-
-Using the API with iframe post message
---------------------------------------
-
-A message (either received by the plugin or sent to it) is defined as follow:
-
-```
-    {
-      action: <request, response or notification>,
-      key: '<key>',
-      type: '<type>',
-      value: [<value1>, <value2>, ...],
-      id: <call id> <used to track response>
-    }
-```
-
-example:
-
-```
-    window.parent.postMessage(JSON.stringify({
-        action: 'request',
-        key: 'config',
-        type: 'setConfig',
-        value: [document.getElementById('filename').value, document.getElementById('valuetosend').value],
-        id: 34
-    }), '*')
-```
-
-There are 2 ways for interacting with the API, listening on notification and sending request
-
-```
-    function receiveMessage (event) {
-        if (event.data.action === 'notification') {
-            ...
-        }
-        if (event.data.action === 'response') {
-            < listen on the response of the request app / updateTitle >
-            < contain event.data.error if any >
-            ...
-        }
-    }
-    window.addEventListener('message', receiveMessage, false)
-    
-    window.parent.postMessage(JSON.stringify({
-      action: 'request',
-      key: 'app',
-      type: 'updateTitle',
-      value: ['changed title ' + k++],
-      id: 39
-    }), '*')
-```
-
-from a response point of view, The `error` property is `undefined` if no error happened. In case of error (due to permission, system error, API error, etc...), `error` contains a string describing the error
-
-see [Remix Plugin API usage](./remix_plugin_api.html) for a list of available key / value describing the API.
-
-Using the API with remix extension NPM package
-----------------------------------------------
-
-The `remix-plugin` NPM package can be used to abstract the iframe layer:
-
-```
-    var extension = require('remix-plugin')
-    
-    extension.listen('<key>', '<type>', function () {})
-    extension.call('<key>', '<type>', '<array of parameters>', function (error, result) {})
-    
-    // examples
-    extension.listen('compiler', 'compilationFinished', function () {})
-    extension.call('app', 'detectNetWork', [], function (error, result) {})
-    extension.call('config', 'setConfig', ['<filename>', '<content>'], function (error, result) {})
-```   
-
-`error` is either null or a string, `result` is an array.

docs/remix_tutorials_github.md

@@ -0,0 +1,37 @@
+Remix Tutorials
+=======================
+
+There are a series of tutorials in our github repo [remix-workshops](https://github.com/ethereum/remix-workshops).  
+
+We are in the process of upgrading these tutorials to use the new Remix layout.  
+
+In this repo there tutorials for all levels.  
+
+There are tutorials for specific remix functionalities like:
+
+***Deploying***
+
+    Multiple ways of loading files in Remix
+    Deploying with libraries
+    Deploying a proxy contract
+
+***Testing***
+
+    Testing Examples
+    Continuous integration
+
+***Remix Plugin Development***
+
+    Developing a plugin for Remix and deploying it to swarm
+
+***Other***
+
+    EtherAtom (walkthrough slides + screencast)
+    Debugging transactions with Remix IDE
+    Recording and replaying transactions
+    Using a Pipeline plugin for developing Solidity contracts with demo video
+    Running scripts in the Remix terminal (batch deployment) (proxy deployment)
+
+***Additional external workshops***
+
+    Using Oraclize plugin in Remix

docs/remixd.md

@@ -0,0 +1,57 @@
+Remixd: Get access your local filesystem 
+=========================================
+
+`remixd` is an npm module. Its purpose is to give the remix web
+application access to a folder on your local computer.
+
+The code of `remixd` is
+[here](https://github.com/ethereum/remixd) .
+
+`remixd` can be globally installed using the following command:
+`npm install -g remixd`
+
+You can install it just in the directory of your choice using this command:
+`npm install remixd`
+
+Then `remixd -s <absolute-path-to-the-shared-folder> --remix-ide <your-remix-ide-URL-instance>` will start `remixd` and will share the given folder. 
+
+For example, to sync your local folder to the official Remix IDE, 
+`remixd -s <absolute-path-to-the-shared-folder> --remix-ide https://remix.ethereum.org`
+
+The folder is shared using a websocket connection between `Remix IDE`
+and `remixd`.
+
+Be sure the user executing `remixd` has read/write permission on the
+folder.
+
+There is an option to run remixd in read-only mode, use `--read-only` flag.
+
+**Warning!**
+
+`remixd` provides `full read and write access` to the given folder for `any
+application` that can access the `TCP port 65520` on your local host.
+
+From `Remix IDE`, in the Plugin Manager you need to activate the remixd plugin.  
+
+A modal dialog will ask confirmation
+
+Accepting this dialog will start a session.
+
+If you do not have `remixd` running in the background - another modal will open up and it will say: 
+
+```
+Cannot connect to the remixd daemon. 
+Please make sure you have the remixd running in the background.
+```
+
+Assuming you don't get the 2nd modal, your connection to the remixd daemon is successful. The shared folder will be available in the file explorer.
+
+**When you click the activation of remixd is successful - there will NOT be an icon that loads in the icon panel.**
+
+Click the File Explorers icon and in the swap panel you should now see the folder for `localhost`.
+
+Click on the `localhost connection` icon:
+
+![](images/a-remixd-success.png)
+
+

docs/run.md

@@ -1,10 +1,13 @@
-Running transactions
+Run & Deploy
-====================
+============
 
-The Run tab is an important section of Remix. It allows you to send
+The Run tab allows you to send transactions to the current environment.
-transactions to the current environment.
 
-![image](images/remix_runtab.png)
+To get to the Run & Deploy module - click the run icon in the icon panel.
+
+In order to use this module you need to have a contract compiled.  So if there is file name in the contract pulldown menu ( in the image below it's the pulldown that says **Ballot**), then you can interact with this contract.  If nothing is there - then you need to select a contract - make it the active contract in the main panel, ( in the image below - on the right side of the page - in the main panel - you see the ballot.sol so it is the active contract) then go to the compiler module and compile it.
+
+![](images/a-runtab1.png)
 
 Run Setup
 ---------
@@ -20,7 +23,7 @@ Environment:
     blockchain from scratch, the old one will not be saved.
 
 -   `Injected Provider`: Remix will connect to an injected
-    web3 provider. `Mist` and `Metamask` are example of
+    web3 provider. `Metamask` is an example of
     providers that inject web3, thus can be used with this
     option.
 
@@ -37,7 +40,7 @@ Environment:
 -   Value: the amount of value for the next created transaction (this
      value is always reset to 0 after each transaction execution).
 
- ![image](images/remix_runtab_example.png)
+ ![](images/a-Runtab-deploy-atAddress.png)
 
 Initiate Instance
 -----------------
@@ -50,7 +53,7 @@ This section contains the list of compiled contracts and 2 actions:
     when using this feature, and be sure you trust the contract at that
     address.
 
--   `Create` send a transaction that deploys the selected contract. When
+-   `Deploy` send a transaction that deploys the selected contract. When
     the transaction is mined, the newly created instance will be added
     (this might take several seconds). Note that if the `constructor`
     has parameters, you need to specify them.
@@ -96,7 +99,7 @@ We can find many use cases for the recorder, for instance:
     -   Working in a dev environment does often require to setup the
         state in a first place.
 
-![image](images/remix_recorder.png)
+![](images/a-runtab-recorder.png)
 
 Saving a record ends up with the creation of this type of content (see
 below):
@@ -120,7 +123,8 @@ Input parameters are `1` and
 all these transactions are created using the value of the accounts
 `account{0}`.
 
-``` {.sourceCode .none}
+``` 
+{.sourceCode .none}
 {
 "accounts": {
     "account{0}": "0xca35b7d915458ef540ade6068dfe2f44e8fa733c"

docs/settings.md

@@ -1,9 +1,11 @@
 Settings
 ========
 
-This section displays the current compiler version and allows one to change to another version.
+To get to **Settings** click the gear a the very bottom of the icon panel. 
 
-![image](images/remix_settingstab.png)
+You can find a link to the homepage (if you closed it) as well as a link to our Gitter Channel and for you aesthetes out there, we now have a rather large list of themes.  
+
+![](images/a-themes.png)
 
 Another important settings:
 

docs/solidity_editor.md

@@ -5,7 +5,7 @@ The Remix editor recompiles the code each time the current file is
 changed or another file is selected. It also provides syntax
 highlighting mapped to solidity keywords.
 
-![image](images/remix_editor.png)
+![](images/a-sol-editor.png)
 
 Here's the list of some important features:
 

docs/static_analysis.md

@@ -7,7 +7,7 @@ new analysis is run at each compilation.
 The analysis tab gives detailed information about the contract code. It
 can help you avoid code mistakes and to enforce best practices.
 
-![image](images/remix_analysistab.png)
+![](images/a-static-analysis.png)
 
 Here is the list of analyzers:
 

docs/support_tab.md

@@ -1,9 +0,0 @@
-Support tab in Remix
-======================
-
-This section provides a link to Remix Issues where users can report a
-bug or suggest a feature, as well as providing other useful links. It
-also displays a [Remix support
-channel](http://gitter.im/ethereum/remix)
-
-![image](images/remix_supporttab.png)

docs/terminal.md

@@ -1,7 +1,7 @@
 Terminal
 ========
 
-![image](images/remix_terminal.png)
+![](images/a-terminal-and-more.png)
 
 Features, available in the terminal:
 
@@ -17,4 +17,5 @@ Features, available in the terminal:
     the Remix IDE).
 -   It allows searching for the data and clearing the logs from the
     terminal.
+-   You can run scripts by inputting them at the bottom after the `>`.
 

docs/tutorial_debug.md

@@ -1,5 +1,5 @@
-Tutorial on debugging transactions with Remix
+Debugging transactions
-===============================================
+======================
 
 The goal of this tutorial is to explain how to debug transaction using
 Remix.
@@ -15,7 +15,8 @@ a different use case.
 We will not explain in detail here how to write or deploy contract. Let
 us start with a basic contract (replace this one by your's):
 
-``` {.sourceCode .none}
+``` 
+{.sourceCode .none}
 contract Donation {
     address owner;
     event fundMoved(address _to, uint _amount);
@@ -53,9 +54,7 @@ contract Donation {
 ```
 
 For the purpose of this tutorial, we will run the `JavaScript VM`
-(that's the default mode when you don't use Remix with Mist or
+(that's the default mode when you don't use Remix with Metamask). This simulates a custom blockchain. You could do the same using a proper backend node.
-Metamask). This simulates a custom blockchain. You could do the same
-using a proper backend node.
 
 Now, let's deploy the contract:
 
@@ -189,7 +188,8 @@ variable, it might be triggered twice: Once for initializing the
 variable to zero and second time for assigning the actual value. As an
 example, assume you are debugging the following contract:
 
-``` {.sourceCode .none}
+``` 
+{.sourceCode .none}
 contract ctr {
     function hid () {
         uint p = 45;

docs/tutorial_eattheblock.md

@@ -1,10 +0,0 @@
-Eat the Block tutorials
-=======================
-
-This section list Remix related tutorials:
-
-[Youtube channel](https://www.youtube.com/playlist?list=PLbbtODcOYIoH7597VZ4sTXRKJkuhMAqYy)
-
-[Introduction](https://www.youtube.com/watch?v=4CsH5xTxhSA&index=3&t=738s&list=PLbbtODcOYIoH7597VZ4sTXRKJkuhMAqYy)
-
-[Remix File explorer](https://www.youtube.com/watch?v=nAI_Cr5Y8JY) 

docs/tutorial_geth-remix.md

@@ -1,4 +1,4 @@
-Debugging a Dapp using Remix - Mist - Geth
+Debugging a Dapp using Remix & Geth
 ==========================================
 
 The ultimate goal of this tutorial is to debug transactions that have
@@ -12,8 +12,6 @@ We will need four tools for that :
 
 > -   Geth - this is the center piece and provides the blockchain
 >     environment. We will basically run geth in a dev mode.
-> -   Mist - this is the Ethereum dapp browser. We will use it to browse
->     our front end.
 > -   Remix - this is the Ethereum IDE. We will use it to develop our
 >     Solidity contract.
 > -   Any code editor you want - in order to write your front end :)
@@ -21,15 +19,9 @@ We will need four tools for that :
 Install the environment
 -----------------------
 
-### Install Mist
+### Install Metamask
 
-Mist is the Ethereum browser and the entry point of a Dapp.
+Basically we will run our front end in the Metamask Chrome plugin ([Metamask](http://metamask.io)).
-
-Please download [the latest
-version](http://github.com/ethereum/mist/releases) (at least 0.8.9).
-
-Basically we will always run our front end in Mist (note that it is also
-possible to use [Metamask](http://metamask.io)).
 
 ### Install Geth
 
@@ -49,7 +41,7 @@ not be synced to the main or ropsten network.
 `<test-chain-directory>` is the folder where keys and chain data will be
 stored.
 
-`--ipcpath` defines the end point that other apps (like Mist) use to
+`--ipcpath` defines the end point that other apps (like Metamask) use to
 talk to geth.
 
 `--datadir` specifies the data directory.
@@ -67,29 +59,6 @@ Then we need to create accounts and mine a bit to generate some Ether:
 Next time we run Geth, we will only need to mine transactions (no need
 to recreate account).
 
-### Run Mist
-
-If we run Mist without any argument, its internal Geth node will run. As
-we have our own we need to specify the ipc path of the node installed
-above.
-
-    mist --rpc <test-chain-directory>/geth.ipc
-
-(yes the option is --rpc)
-
-Once Mist is started, verify that it is connected to the test node
-(that's very important!!).
-
-On the bottom left, check that the network is `Private-net` and that the
-block number is the same as reported by the test node we are currently
-running. Run the following command in the Geth Console to check:
-web3.eth.blockNumber.
-
-![image](mist1.png)
-
-Clicking on Wallet will allow you to send transactions and check account
-balances (if you are currently mining you should see the balance
-increasing).
 
 ### Starting Remix
 
@@ -119,7 +88,8 @@ Here is a sample solidity contract.
 
 Copy and paste the following inside remix:
 
-``` {.sourceCode .none}
+``` 
+{.sourceCode .none}
 contract Donation {
     address owner;
     event fundMoved(address _to, uint _amount);
@@ -160,18 +130,18 @@ contract Donation {
 
 and here is the front end:
 
-``` {.sourceCode .none}
+```html
 <div>    
     <div>Donation Contract</div>
     <br/>
-    <input id='contractaddress' placeholder='contract address'></intput>
+    <input id='contractaddress' placeholder='contract address' />
     <br/>
     <div>
         <br/>
-        <input id='fromGive' placeholder='from' ></intput><input placeholder='amount' id='valueGive'></intput><button id="fallbackbtn" onclick="donate()">give</button>
+        <input id='fromGive' placeholder='from' /><input placeholder='amount' id='valueGive' /><button id="fallbackbtn" onclick="donate()">give</button>
         <br/>
         <br/>
-        <input id='fromMoveFund' placeholder='from' ></intput><input id='moveFundTo' placeholder='move to' ></intput><input id='amountToMove' placeholder='amount' ></intput><button id="movefundbtn" onclick="movefund()">moveFund</button>
+        <input id='fromMoveFund' placeholder='from' /><input id='moveFundTo' placeholder='move to' /><input id='amountToMove' placeholder='amount' /><button id="movefundbtn" onclick="movefund()">moveFund</button>
         <br/>
         <br/>
         <div id='wait' ></div>

docs/tutorial_import.md

@@ -1,34 +0,0 @@
-Importing Source Files in Solidity
-==================================
-
-This tutorial will show you how to import local and external files.
-
-The compilation result will also contain contracts implemented in the
-imported files.
-
-For a detailed explanation of the `import` keyword see the
-[Solidity documentation](https://solidity.readthedocs.io/en/develop/layout-of-source-files.html?highlight=import#importing-other-source-files)
-
-Importing a local file
-----------------------
-
-Other files in Remix can be imported just by specifying their path.
-Please use ./ for relative paths to increase portability.
-
-![image](tuto_basicimport.png)
-
-Importing from GitHub
----------------------
-
-It is possible to import files directly from GitHub with URLs like
-`https://github.com/<owner>/<repo>/<path to the file>`.
-
-![image](tuto_importgit.png)
-
-Importing from Swarm
---------------------
-
-Files can be imported using all URLs supported by swarm. If you do not
-have a swarm node, swarm-gateways.net will be used instead.
-
-![image](tuto_importswarm.png)

docs/tutorial_remixd_filesystem.md

@@ -1,50 +0,0 @@
-Access your local filesystem by using remixd
-===================================================
-
-`remixd` is an npm module. Its purpose is to give the remix web
-application access to a folder from your local computer.
-
-The code of `remixd` can be checked out
-[here](https://github.com/ethereum/remixd) .
-
-`remixd` can be globally installed using the following command:
-`npm install -g remixd`.
-
-Then `remixd -s <absolute-path-to-the-shared-folder> --remix-ide <your-remix-ide-URL-instance>` will start `remixd`
-and share the given folder. 
-
-For example, to sync your local folder to the official Remix IDE, 
-`remixd -s <absolute-path-to-the-shared-folder> --remix-ide https://remix.ethereum.org`
-
-The folder is shared using a websocket connection between `Remix IDE`
-and `remixd`.
-
-Be sure the user executing `remixd` has read/write permission on the
-folder.
-
-There is an option to run remixd in read-only mode, use `--read-only` flag.
-
-**Warning!**
-
-`remixd` provides `full read and write access` to the given folder for `any
-application` that can access the `TCP port 65520` on your local host.
-
-From `Remix IDE`, you will need to activate the connection.
-
-Click on the `localhost connection` icon:
-
-![image](remixd_noconnection.png)
-
-A modal dialog will ask confirmation
-
-![image](remixd_alert.png)
-
-Accepting this dialog will start a session. Once the connection is made,
-the status will update and the connection icon should shows up in green.
-
-Hovering the icon will give more connection status information.
-
-At this point if the connection is successful, the shared folder will be
-available in the file explorer.
-
-![image](remixd_connectionok.png)

docs/udapp.md

@@ -1,8 +1,12 @@
-Deployed contracts
+Run & Deploy (part 2)
-====================
+=====================
+
+## Deployed contracts
 
 This section in the Run tab contains a list of deployed contracts to interact with through autogenerated UI of the deployed contract (also called udapp).
 
+**Needs an Image**
+
 Several cases apply:
 
 -   The called function is declared as `constant` or `pure` in Solidity. The action has a blue background, clicking it does not

docs/unittesting.md

@@ -1,9 +1,9 @@
 Unit Testing
 ============
 
-The unit testing tab allows to run unit testing.
+Click the "double check" icon to get to the unit testing plugin.  If you don't see this icon, go to the plugin manager and load up the unit testing plugin.
 
-![image](images/remix_unittest.png)
+![](images/a-unit-testing1.png)
 
 Generate test File
 ------------------

docs/workshop_Building_smart_contracts_with_Remix.md

@@ -1,14 +0,0 @@
-Building Smart Contracts with Remix
-=======================
-
-We prepared a tutorial that will help you build DApps with Remix. In this tutorial, you learn how to build smart contracts, how to deploy them and how to interact with them. Then we show you how to connect your frontend with the blockchain by using web3.js.
-
-### Let's get started
-
-This tutorial was used in workshops at ethCC, Edcon, and DappCon. 
-
-You can [watch the Edcon presentation talk](https://www.youtube.com/watch?v=nAI_Cr5Y8JY) and here are the [workshop slides](https://slides.com/ninabreznik/deck-11-13#/).
-(May 3, 2018)
-
-Here are the [latest slides (hosted on swarm)](http://30400.swarm-gateways.net/bzz:/49277e2a16baf5576c9f54204c70dc403a425c3df85424864fe04ad6dfc609bc/) and here are the [latest slides (not on swarm)](https://www.updig.is/pdf/remix-chez-coinhouse.pdf). 
-(Oct 16, 2018)