Beginner onboarding

apps/remix-ide-e2e/src/helpers/init.ts

@@ -7,6 +7,8 @@ export default function (browser: NightwatchBrowser, callback: VoidFunction, url
     .url(url || 'http://127.0.0.1:8080')
     .pause(5000)
     .switchBrowserTab(0)
+    .waitForElementVisible('[id="remixTourSkipbtn"]')
+    .click('[id="remixTourSkipbtn"]')
     .fullscreenWindow(() => {
       if (preloadPlugins) {
         initModules(browser, () => {

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

@@ -114,7 +114,7 @@ module.exports = {
       .click('*[data-id="localPluginRadioButtonsidePanel"]')
       .click('*[data-id="modalDialogModalFooter"]')
       .modalFooterOKClick()
-      .waitForElementVisible('*[data-id="pluginManagerComponentDeactivateButtonremixIde"]', 60000)
+      .waitForElementVisible('*[data-id="pluginManagerComponentDeactivateButtonremixIde"]', 100000)
   },
 
   'Should display error message for creating already existing plugin': function (browser: NightwatchBrowser) {

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

@@ -84,8 +84,7 @@ module.exports = {
       .scrollAndClick('*[data-id="testTabRunTestsTabRunAction"]')
       .pause(2000)
       .click('*[data-id="testTabRunTestsTabStopAction"]')
-      .waitForElementContainsText('*[data-id="testTabRunTestsTabStopAction"]', 'Stopping', 60000)
-      .waitForElementContainsText('*[data-id="testTabSolidityUnitTestsOutput"]', '/tests/ks2b_test.sol', 120000)
+      .waitForElementContainsText('*[data-id="testTabSolidityUnitTestsOutput"]', '/tests/ks2b_test.sol', 200000)
       .notContainsText('*[data-id="testTabSolidityUnitTestsOutput"]', '/tests/4_Ballot_test.sol')
       .notContainsText('*[data-id="testTabSolidityUnitTestsOutput"]', '/tests/simple_storage_test.sol')
       .waitForElementContainsText('*[data-id="testTabTestsExecutionStopped"]', 'The test execution has been stopped', 60000)

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

@@ -22,6 +22,7 @@ module.exports = {
   'Checks vertical icons panel contex menu deactivate': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('div[data-id="remixIdeIconPanel"]', 10000)
       .waitForElementVisible('*[data-id="verticalIconsKinddebugger"]', 7000)
+      .pause(5000)
       .rightClick('[data-id="verticalIconsKinddebugger"]')
       .click('*[id="menuitemdeactivate"]')
       .click('*[data-id="verticalIconsKindsettings"]')

apps/remix-ide/src/app.js

@@ -7,6 +7,7 @@ import PanelsResize from './lib/panels-resize'
 import { RemixEngine } from './remixEngine'
 import { RemixAppManager } from './remixAppManager'
 import { FramingService } from './framingService'
+import { WalkthroughService } from './walkthroughService'
 import { MainView } from './app/panels/main-view'
 import { ThemeModule } from './app/tabs/theme-module'
 import { NetworkModule } from './app/tabs/network-module'
@@ -112,7 +113,11 @@ const css = csjs`
     fill: var(--secondary);
   }
   .centered svg polygon {
-    fill: var(--secondary);
+    fill              : var(--secondary);
+  }
+  .onboarding {
+    color             : var(--text-info);
+    background-color  : var(--info);
   }
   .matomoBtn {
     width              : 100px;
@@ -126,11 +131,11 @@ class App {
     self._components = {}
     self._view = {}
     self._view.splashScreen = yo`
-    <div class=${css.centered}>
-      ${basicLogo()}
-      <div class="info-secondary" style="text-align:center">
-        REMIX IDE
-      </div>
+      <div class=${css.centered}>
+        ${basicLogo()}
+        <div class="info-secondary" style="text-align:center">
+          REMIX IDE
+        </div>
       </div>
     `
     document.body.appendChild(self._view.splashScreen)
@@ -496,7 +501,12 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
 
   // Load and start the service who manager layout and frame
   const framingService = new FramingService(sidePanel, menuicons, mainview, this._components.resizeFeature)
-  framingService.start(params)
 
   if (params.embed) framingService.embed()
+  framingService.start(params)
+
+  const walkthroughService = new WalkthroughService(localStorage)
+  if (!params.code) {
+    walkthroughService.start()
+  }
 }

apps/remix-ide/src/app/components/vertical-icons.js

@@ -69,12 +69,14 @@ export class VerticalIcons extends Plugin {
     title = title.replace(/^\w/, c => c.toUpperCase())
     this.icons[name] = yo`
       <div
-        class="${css.icon}"
+        class="${css.icon} m-2"
         onclick="${() => { this.toggle(name) }}"
         plugin="${name}"
         title="${title}"
         oncontextmenu="${(e) => this.itemContextMenu(e, name, documentation)}"
-        data-id="verticalIconsKind${name}">
+        data-id="verticalIconsKind${name}"
+        id="verticalIconsKind${name}"
+      >
         <img class="image" src="${icon}" alt="${name}" />
       </div>`
     this.iconKind[kind || 'none'].appendChild(this.icons[name])
@@ -249,13 +251,14 @@ export class VerticalIcons extends Plugin {
   render () {
     const home = yo`
       <div
-        class="${css.homeIcon}"
+        class="m-1 mt-2 ${css.homeIcon}"
         onclick="${async () => {
           await this.appManager.activatePlugin('home')
           this.call('tabs', 'focus', 'home')
         }}"
         plugin="home" title="Home"
         data-id="verticalIconsHomeIcon"
+        id="verticalIconsHomeIcon"
       >
         ${basicLogo()}
       </div>
@@ -270,16 +273,18 @@ export class VerticalIcons extends Plugin {
     this.iconKind.settings = yo`<div id='settingsIcons' data-id="verticalIconsSettingsIcons"></div>`
 
     this.view = yo`
-      <div class=${css.icons}>
-        ${home}
-        ${this.iconKind.fileexplorer}
-        ${this.iconKind.compiler}
-        ${this.iconKind.udapp}
-        ${this.iconKind.testing}
-        ${this.iconKind.analysis}
-        ${this.iconKind.debugging}
-        ${this.iconKind.none}
-        ${this.iconKind.settings}
+      <div class="h-100">
+        <div class=${css.icons}>
+          ${home}
+          ${this.iconKind.fileexplorer}
+          ${this.iconKind.compiler}
+          ${this.iconKind.udapp}
+          ${this.iconKind.testing}
+          ${this.iconKind.analysis}
+          ${this.iconKind.debugging}
+          ${this.iconKind.none}
+          ${this.iconKind.settings}
+        </div>
       </div>
     `
     return this.view
@@ -292,7 +297,6 @@ const css = csjs`
       width: 42px;
       height: 42px;
       margin-bottom: 20px;
-      margin-left: -5px;
       cursor: pointer;
   }
   .homeIcon svg path {
@@ -302,8 +306,6 @@ const css = csjs`
     fill: var(--primary);
   }
   .icons {
-    margin-left: 10px;
-    margin-top: 15px;
   }
   .icon {
     cursor: pointer;

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

@@ -70,9 +70,9 @@ module.exports = class TestTab extends ViewPlugin {
         })
       } catch (e) {
         console.log(e)
+        this.data.allTests.push(file)
+        this.data.selectedTests.push(file)
       }
-      this.data.allTests.push(file)
-      this.data.selectedTests.push(file)
     })
 
     this.on('filePanel', 'setWorkspace', async () => {

apps/remix-ide/src/index.html

@@ -30,6 +30,7 @@
 		<title>Remix - Ethereum IDE</title>
 		<link rel="stylesheet" href="assets/css/pygment_trac.css">
 		<link rel="icon" type="x-icon" href="assets/img/icon.png">
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/4.1.0/introjs.min.css"> 
 		<script src="assets/js/browserfs.min.js"></script>
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 		<!-- Matomo -->
@@ -56,6 +57,7 @@
 			}
 		</script>
 		<!-- End Matomo Code -->
+		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/introjs.min.css">
 	</head>
 	<body>
 		<script>
@@ -112,7 +114,10 @@
 				})
 			}
 		</script>
-		<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="vendor.js" type="module"></script>
+		<script src="runtime.js" type="module"></script>
+		<script src="polyfills.js" type="module"></script>
+		<script src="vendor.js" type="module"></script>
 		<script src="https://kit.fontawesome.com/41dd021e94.js" crossorigin="anonymous"></script>
+		<script type="text/javascript" src="assets/js/intro.min.js"></script>
 	</body>
 </html>

apps/remix-ide/src/walkthroughService.js

@@ -0,0 +1,54 @@
+const introJs = require('intro.js')
+
+export class WalkthroughService {
+  constructor (params) {
+    this.params = params
+  }
+
+  start (params) {
+    if (!localStorage.getItem('hadTour_initial')) {
+      introJs().setOptions({
+        steps: [{
+          title: 'Welcome to Remix IDE',
+          intro: 'Click to launch the Home tab that contains links, tips, and shortcuts..',
+          element: document.querySelector('#verticalIconsHomeIcon'),
+          tooltipClass: 'bg-light text-dark',
+          position: 'right'
+        },
+        {
+          element: document.querySelector('#compileIcons'),
+          title: 'Solidity Compiler',
+          intro: 'Having selected a .sol file in the File Explorers (the icon above), compile it with the Solidity Compiler.',
+          tooltipClass: 'bg-light text-dark',
+          position: 'right'
+        },
+        {
+          title: 'Deploy your contract',
+          element: document.querySelector('#runIcons'),
+          intro: 'Choose a chain, deploy a contract and play with your functions.',
+          tooltipClass: 'bg-light text-dark',
+          position: 'right'
+        }
+        ]
+      }).onafterchange((targetElement) => {
+        const header = document.getElementsByClassName('introjs-tooltip-header')[0]
+        if (header) {
+          header.classList.add('d-flex')
+          header.classList.add('justify-content-between')
+          header.classList.add('text-nowrap')
+          header.classList.add('pr-0')
+        }
+        const skipbutton = document.getElementsByClassName('introjs-skipbutton')[0]
+        if (skipbutton) {
+          skipbutton.classList.add('ml-3')
+          skipbutton.classList.add('text-decoration-none')
+          skipbutton.id = 'remixTourSkipbtn'
+        }
+      }).start()
+      localStorage.setItem('hadTour_initial', true)
+    }
+  }
+
+  startFeatureTour () {
+  }
+}

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

@@ -11,6 +11,7 @@
     position          : relative;
     width             : 100%;
     padding-left      : 6px;
+    padding-right     : 6px;
     padding-top       : 6px;
   }
   .remixui_fileExplorerTree   {

package.json

@@ -158,6 +158,7 @@
     "form-data": "^4.0.0",
     "fs-extra": "^3.0.1",
     "http-server": "^0.11.1",
+    "intro.js": "^4.1.0",
     "isbinaryfile": "^3.0.2",
     "isomorphic-git": "^1.8.2",
     "jquery": "^3.3.1",