added documentation and deactivate to context menu of vertical icons bar

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

@@ -64,7 +64,7 @@ export class VerticalIcons extends Plugin {
    * Add an icon to the map
    * @param {ModuleProfile} profile The profile of the module
    */
-  addIcon ({ kind, name, icon, displayName, tooltip }) {
+  addIcon ({ kind, name, icon, displayName, tooltip, documentation }) {
     let title = (tooltip || displayName || name)
     title = title.replace(/^\w/, c => c.toUpperCase())
     this.icons[name] = yo`
@@ -73,7 +73,7 @@ export class VerticalIcons extends Plugin {
         onclick="${() => { this.toggle(name) }}"
         plugin="${name}"
         title="${title}"
-        oncontextmenu="${(e) => this.itemContextMenu(e, name)}"
+        oncontextmenu="${(e) => this.itemContextMenu(e, name, documentation)}"
         data-id="verticalIconsKind${name}">
         <img class="image" src="${icon}" alt="${name}" />
       </div>`
@@ -223,13 +223,24 @@ export class VerticalIcons extends Plugin {
     }
   }
 
-  itemContextMenu (e, name) {
-    console.log(name)
-    VERTICALMENU_HANDLE && VERTICALMENU_HANDLE.hide(null, true)
+  async itemContextMenu (e, name, documentation) {
     const actions = {}
-    actions['Deactivate'] = () => { this.call('manager', 'deactivatePlugin', name) }
-    VERTICALMENU_HANDLE = contextMenu(e, actions)
+    if (await this.appManager.canDeactivatePlugin(profile, { name })) {
+      actions.Deactivate = () => {
+        // this.call('manager', 'deactivatePlugin', name)
+        this.appManager.deactivatePlugin(name)
+      }
+    }
+    const links = {}
+    if (documentation) {
+      links.Documentation = documentation
+    }
+    if (Object.keys(actions).length || Object.keys(links).length) {
+      VERTICALMENU_HANDLE && VERTICALMENU_HANDLE.hide(null, true)
+      VERTICALMENU_HANDLE = contextMenu(e, actions, links)
+    }
     e.preventDefault()
+    e.stopPropagation()
   }
 
   render () {

apps/remix-ide/src/app/ui/contextMenu.js

@@ -30,7 +30,7 @@ var css = csjs`
     }
 `
 
-module.exports = (event, items) => {
+module.exports = (event, items, linkItems) => {
   event.preventDefault()
 
   function hide (event, force) {
@@ -45,7 +45,17 @@ module.exports = (event, items) => {
     current.onclick = () => { hide(null, true); items[item]() }
     return current
   })
-  const container = yo`<div id="menuItemsContainer" class="p-1 ${css.container} bg-light shadow border"><ul id='menuitems'>${menu}</ul></div>`
+
+  const menuForLinks = Object.keys(linkItems).map((item, index) => {
+    const current = yo`<li id="menuitem${item.toLowerCase()}" class=${css.liitem}><a href=${linkItems[item]} target="_blank">${item}</a></li>`
+    current.onclick = () => { hide(null, true) }
+    return current
+  })
+  const container = yo`
+    <div id="menuItemsContainer" class="p-1 ${css.container} bg-light shadow border">
+     <ul id='menuitems'>${menu} ${menuForLinks}</ul>
+    </div>
+  `
 
   container.style.left = event.pageX + 'px'
   container.style.top = event.pageY + 'px'

apps/remix-ide/src/remixAppManager.js

@@ -6,12 +6,12 @@ import QueryParams from './lib/query-params'
 import { PermissionHandler } from './app/ui/persmission-handler'
 
 const requiredModules = [ // services + layout views + system views
-  'manager', 'compilerArtefacts', 'compilerMetadata', 'contextualListener', 'editor', 'offsetToLineColumnConverter', 'network', 'theme', 'fileManager', 'contentImport', 'web3Provider', 'scriptRunner', 'fetchAndCompile',
-  'mainPanel', 'hiddenPanel', 'sidePanel', 'menuicons', 'fileExplorers',
-  'terminal', 'settings', 'pluginManager', 'tabs']
+  'manager', 'compilerArtefacts', 'compilerMetadata', 'contextualListener', 'editor', 'offsetToLineColumnConverter', 'network', 'theme',
+  'fileManager', 'contentImport', 'web3Provider', 'scriptRunner', 'fetchAndCompile', 'mainPanel', 'hiddenPanel', 'sidePanel', 'menuicons',
+  'fileExplorers', 'terminal', 'settings', 'pluginManager', 'tabs', 'udapp']
 
 export function isNative (name) {
-  const nativePlugins = ['vyper', 'workshops', 'debugger', 'remixd']
+  const nativePlugins = ['vyper', 'workshops', 'debugger', 'remixd', 'menuicons']
   return nativePlugins.includes(name) || requiredModules.includes(name)
 }