example

added some steps
fixed the margines
new class for tour

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'
@@ -20,7 +21,6 @@ import { MainPanel } from './app/components/main-panel'
 import { OffsetToLineColumnConverter, CompilerMetadata, CompilerArtefacts, FetchAndCompile, CompilerImports } from '@remix-project/core-plugin'
 
 import migrateFileSystem from './migrateFileSystem'
-const introJs = require('intro.js')
 
 const isElectron = require('is-electron')
 const csjs = require('csjs-inject')
@@ -113,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;
@@ -127,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)
@@ -497,13 +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()
-  //if (!params) {
-    if (!localStorage.getItem('hadTour_initial')) {
-      introJs().start()
-      localStorage.setItem('hadTour_initial', true)
-    }
-  //}
+  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,8 +273,8 @@ export class VerticalIcons extends Plugin {
     this.iconKind.settings = yo`<div id='settingsIcons' data-id="verticalIconsSettingsIcons"></div>`
 
     this.view = yo`
-      <div class="h-100" data-title="Welcome!" data-intro="Hello World!">
-        <div class=${css.icons} data-intro="Intro.js can highlight on elements">
+      <div class="h-100">
+        <div class=${css.icons}>
           ${home}
           ${this.iconKind.fileexplorer}
           ${this.iconKind.compiler}
@@ -294,7 +297,6 @@ const css = csjs`
       width: 42px;
       height: 42px;
       margin-bottom: 20px;
-      margin-left: -5px;
       cursor: pointer;
   }
   .homeIcon svg path {
@@ -304,8 +306,6 @@ const css = csjs`
     fill: var(--primary);
   }
   .icons {
-    margin-left: 10px;
-    margin-top: 15px;
   }
   .icon {
     cursor: pointer;

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 -->
@@ -117,6 +118,6 @@
 		<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="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/intro.min.js"></script>
+		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/4.1.0/intro.min.js"></script>
 	</body>
 </html>

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-lock.json

@@ -20125,9 +20125,9 @@
       "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA=="
     },
     "intro.js": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/intro.js/-/intro.js-4.0.0.tgz",
-      "integrity": "sha512-IS8+p4rpnWUq2Vd8YRgjR8w9lbyLvT0ptscBqA4iudO68oven39CvxHfxopfwlNUGgmgcyX17DOETof+D90AXA=="
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/intro.js/-/intro.js-4.1.0.tgz",
+      "integrity": "sha512-+Y+UsP+yvqqlEOjFExMBXKopn3nzwc91PaUl0SrvqiVs6ztko1DzfkoXR2AnfirZVZZhr5Aej6wlXRlvIkuMcA=="
     },
     "invariant": {
       "version": "2.2.4",

package.json

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