changes based on LianaHus comments complete

apps/remix-ide/src/walkthroughService.js

@@ -7,45 +7,47 @@ export class WalkthroughService {
 
   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)
+      document.addEventListener('doWalkThrough', (e) => {
+        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('#verticalIconsKindudapp'),
+            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)
+      })
     }
   }
 

libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx

@@ -68,7 +68,7 @@ function Icon ({
   return (
     <Fragment>
       <div
-        className="remixui_icon m-2 pl-1"
+        className={name === 'pluginManager' ? 'remixui_icon ml-2 mt-2 mr-2 mb-0 pl-1' : 'remixui_icon m-2 pl-1'}
         onLoad={() => {
           if (name === 'filePanel') {
             addActive(name)

libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css

@@ -83,7 +83,8 @@
     -ms-overflow-style: none;
   }
   .remixui_scrollable-container {
-    max-height: 500px;
+    max-height: 520px;
+    border-bottom: 3px solid #3f4455;
   }
   .remixui_scrollbar::-webkit-scrollbar { /* Chrome, Safari and other Webkit browsers*/
     display: none;
@@ -97,12 +98,7 @@
   .remixui_icon-chevron {
     z-index: 1000;
   }
-  .remixui_icon-chevron {
-    z-index: 1000;
-  }
-  .remixui_icon-chevron {
-    z-index: 1000;
-  }
+
   #menuitems {
     list-style: none;
     margin: 0px;

libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx

@@ -3,6 +3,7 @@
 import React, {
   Fragment,
   useEffect,
+  useReducer,
   useRef
 } from 'react'
 
@@ -17,18 +18,13 @@ export interface RemixUiVerticalIconsPanelProps {
 }
 
 let scrollHeight: any
-let clientHeight: any
-const requiredModules = [
-  'manager', 'compilerArtefacts', 'compilerMetadata', 'contextualListener', 'editor', 'offsetToLineColumnConverter', 'network', 'theme',
-  'fileManager', 'contentImport', 'blockchain', 'web3Provider', 'scriptRunner', 'fetchAndCompile', 'mainPanel', 'hiddenPanel', 'sidePanel', 'menuicons',
-  'filePanel', 'terminal', 'settings', 'pluginManager', 'tabs', 'udapp', 'dGitProvider', 'solidity-logic']
-const nativePlugins = ['vyper', 'workshops', 'debugger', 'remixd', 'menuicons', 'solidity', 'hardhat-provider']
 
 export function RemixUiVerticalIconsPanel ({
   verticalIconsPlugin
 }: RemixUiVerticalIconsPanelProps) {
   const scrollableRef = useRef<any>()
   const iconPanelRef = useRef<any>()
+  const udappPanelRef = useRef<any>()
 
   function onThemeChanged (themeType: any) {
     const invert = themeType === 'dark' ? 1 : 0
@@ -93,17 +89,12 @@ export function RemixUiVerticalIconsPanel ({
   }, [])
 
   useEffect(() => {
-    const found = iconPanelRef.current!.querySelector('#fileExplorerIcons')
-    const localRead = localStorage.getItem('hadTour_initial') as string
-    const hadInitialTour = JSON.parse(localRead)
-    console.log('initial tour value ', hadInitialTour)
-    if (!found) console.log('VerticalIcon is not loaded yet!', found)
-    // return () => {
-    //   if (!hadInitialTour) {
-    //     if (found) console.log('Its event emission time!', found)
-    //   }
-    //   console.log('Won\'t be doing an initial tour of remix now!')
-    // }
+    const found = iconPanelRef.current!.querySelector('#verticalIconsKindudapp')
+    if (found) {
+      console.log('emit event now as vertical panel is in the viewport', found)
+      const doWalkThroughEvent = new Event('doWalkThrough')
+      document.dispatchEvent(doWalkThroughEvent)
+    }
   })
 
   return (
@@ -185,9 +176,10 @@ export function RemixUiVerticalIconsPanel ({
               .filter(p => p !== 'pluginManager')
               .filter(p => p === 'udapp')
               .map(p => (
-                <div id="compileIcons" key={
+                <div id="runIcons" data-id="verticalIconsKindUdapp" key={
                   verticalIconsPlugin.targetProfileForChange[p].displayName
-                }>
+                } ref={udappPanelRef}
+                >
                   <Icon
                     kind={verticalIconsPlugin.targetProfileForChange[p].kind}
                     displayName={
@@ -317,15 +309,15 @@ export function RemixUiVerticalIconsPanel ({
                 }
               />
             ))}
+          {scrollableRef.current && scrollableRef.current!.scrollHeight > scrollableRef.current!.clientHeight
+            ? <i className="fa fa-chevron-up remixui_icon-chevron mt-0 mb-0 ml-1 pl-3"></i>
+            : null
+          }
         </div>
-        {scrollableRef.current && scrollableRef.current!.scrollHeight > scrollableRef.current!.clientHeight
-          ? <i className="fa fa-chevron-up remixui_icon-chevron m-3"></i>
-          : null
-        }
         <div
           id="remixuiScrollable"
           className={scrollableRef.current && scrollableRef.current.clientHeight > 0
-            ? 'border-bottom remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'
+            ? 'border-bottom remixui_default-icons-container remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'
             : 'remixui_scrollable-container remixui_scrollbar remixui_hide-scroll'}
           ref={scrollableRef}
         >
@@ -366,7 +358,7 @@ export function RemixUiVerticalIconsPanel ({
           </OtherIcons>
         </div>
         {scrollableRef.current && scrollableRef.current!.scrollHeight > scrollableRef.current!.clientHeight
-          ? <i className="fa fa-chevron-down remixui_icon-chevron m-3"></i>
+          ? <i className="fa fa-chevron-down remixui_icon-chevron mt-0 mb-0 ml-1 pl-3"></i>
           : null
         }
         {verticalIconsPlugin.targetProfileForChange &&