fix: bump to electron 6 + custom scrollbars (#437)

* chore: updates electron to v6

* fix: custom css scrollbar

* chore: update from `setMenu(null)` to `removeMenu()` according to electron v6 breaking changes: https://github.com/electron/electron/blob/master/docs/api/breaking-changes.md#winsetmenunull

* chore:
* upgrade electron-builder for electron v6 fixes
* update from `yarn build` to `yarn dist` according to latest electron-builder docs

* chore: bump version to 1.5.2, update author email from [email protected] to [email protected]

Author: evertonfraga

.circleci/config.yml

@@ -30,12 +30,12 @@ aliases:
 
   - &node_installation
     run:
-      name: "Update Node.js and npm if on MacOS"
+      name: 'Update Node.js and npm if on MacOS'
       command: .circleci/install_node.sh
 
   - &upgrade_yarn
     run:
-      name: "Updates yarn"
+      name: 'Updates yarn'
       command: .circleci/upgrade_yarn.sh
 
   # Custom task removes unnecessary build files before uploading release directory
@@ -55,16 +55,15 @@ aliases:
     run: yarn test:e2e -s
 
   - &run_script
-    run: 
-      name: "Building app (deploy if on master)"
-      command: | 
+    run:
+      name: 'Building app (deploy if on master)'
+      command: |
         if [[ "${CIRCLE_BRANCH}" == 'master' ]]; then
           yarn release --$GRID_ENV;
         else
-          yarn build --$GRID_ENV;
+          yarn dist --$GRID_ENV;
         fi;
 
-
   - &run_steps
     steps:
       - checkout

Config.js

@@ -60,7 +60,7 @@ const startConfigEditor = () => {
     width: 800,
     height: 600
   })
-  win.setMenu(null)
+  win.removeMenu()
 }
 
 module.exports = {

RELEASE.md

@@ -8,15 +8,15 @@ If you include a new top-level file to be distributed with the application, it m
 
 ### Testing a release candidate locally
 
-`yarn build` will package up the app, with installers for each OS, and output them into a `release` directory.
+`yarn dist` will package up the app, with installers for each OS, and output them into a `release` directory.
 
-Note: on macOS, you'll get a warning if you don't sign the package with an Apple developer certificate, which happens within the `yarn build` step. See this [tutorial](https://9to5mac.com/2016/03/27/how-to-create-free-apple-developer-account-sideload-apps/) if you need help getting set up with a free account. A `Mac Development` certificate will suffice for local testing.
+Note: on macOS, you'll get a warning if you don't sign the package with an Apple developer certificate, which happens within the `yarn dist` step. See this [tutorial](https://9to5mac.com/2016/03/27/how-to-create-free-apple-developer-account-sideload-apps/) if you need help getting set up with a free account. A `Mac Development` certificate will suffice for local testing.
 
 ### Preparing a release via CI (recommended)
 
 1. **Update the version number** of the release in `package.json`.
 1. **Prepare Grid-UI for release** by merging any changes from `dev` into `master`. **Important**: do not squash and merge, as you'll end up with two different branches. Use "Create a merge commit".
-1. **Merge the new code into `master`.** CircleCI will build the new installers (`yarn build`) and create a draft release for the new version. **Note:** if the CI builds for a version number that already exists, it will replace the assets for that version.
+1. **Merge the new code into `master`.** CircleCI will build the new installers (`yarn dist`) and create a draft release for the new version. **Note:** if the CI builds for a version number that already exists, it will replace the assets for that version.
 1. **Write release notes.** The draft can be edited from the GitHub releases page.
 1. **Publish the release.** You must manually publish the draft. Within GitHub's UI, edit the draft and select `Publish release`.
 1. **Update Github pages** Rebuild github pages to display the latest release (git commit -m "docs: pages rebuild" --allow-empty && git push origin master)

grid_apps/AppManager.js

@@ -219,7 +219,7 @@ class AppManager extends EventEmitter {
         },
         { scope }
       )
-      mainWindow.setMenu(null)
+      mainWindow.removeMenu()
       /*
       mainWindow.webContents.openDevTools({
         mode: 'detach'

package.json

@@ -1,10 +1,10 @@
 {
   "name": "grid",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "Ethereum Grid",
   "main": "nano.js",
   "homepage": "https://github.com/ethereum/grid",
-  "author": "Grid team <mist@ethereum.org>",
+  "author": "Grid Team <grid@ethereum.org>",
   "license": "ISC",
   "repository": "https://github.com/ethereum/grid",
   "scripts": {
@@ -18,8 +18,8 @@
     "test:integration:parity": "cross-env NODE_ENV=test mocha ./test/integration/parity.test.js",
     "test:integration:geth": "cross-env NODE_ENV=test mocha ./test/integration/geth.test.js",
     "prepare-release": "node ./scripts/copyApp.js",
-    "build:grid": "yarn run prepare-release && build",
-    "release": "env-cmd .env yarn run build:grid"
+    "dist": "yarn run prepare-release && electron-builder",
+    "release": "env-cmd .env yarn run dist"
   },
   "dependencies": {
     "@philipplgh/electron-app-manager": "^0.45.0",
@@ -33,9 +33,9 @@
     "ava": "^1.4.1",
     "chai": "^4.2.0",
     "cross-env": "^5.2.0",
-    "electron": "5.0.8",
-    "electron-builder": "20.31.3",
-    "electron-rebuild": "^1.8.5",
+    "electron": "6.0.4",
+    "electron-builder": "21.2.0",
+    "electron-rebuild": "^1.8.6",
     "env-cmd": "^8.0.2",
     "husky": "^1.3.1",
     "lint-staged": "^8.1.3",

ui/nano.html

@@ -8,10 +8,9 @@
       html,
       body {
         padding: 0px;
-        margin: 0px;
+        margin: 0px; 
         background-color: transparent;
-        overflow-y: scroll;
-        overflow-x: hidden;
+        overflow: hidden;
         user-select: none;
       }
       body {
@@ -47,6 +46,8 @@
         margin-top: 18px;
         z-index: 1;
         border-radius: 12px;
+        display: flex;
+        flex-direction: column;
       }
       #app,
       .tip::before {
@@ -80,6 +81,51 @@
         border: 1px solid #303030;
       }
 
+      .plugin-container {
+        overflow-y: auto;
+        /* windows and linux */
+        height: calc(100vh - 75px);
+      }
+
+      .is-mac .plugin-container {
+        height: calc(100vh - 88px);
+      }
+
+      /* Base properties */
+      .plugin-container::-webkit-scrollbar {
+        width: 4px;
+        border-radius: 2px;
+      }
+      .plugin-container::-webkit-scrollbar-thumb {
+        border-radius: 2px;
+        transition: 200ms all ease-out;
+      }
+
+      /* Scrollbar track and thumb starts transparent */
+      .plugin-container::-webkit-scrollbar {
+        background: rgba(1, 1, 1, .1);
+      }
+      .plugin-container::-webkit-scrollbar-thumb {
+        background: rgba(255,255, 255, 0.1);
+      }
+
+      /* Shows scrollbar and thumb when hovering the window */
+      html:hover .plugin-container::-webkit-scrollbar {
+        background: rgba(1, 1, 1, .2);
+      }
+      html:hover .plugin-container::-webkit-scrollbar-thumb {
+        /* 30% white */
+        /* background: #4c4c4c;   */
+        background: linear-gradient(#585858, #424242);
+      }
+
+      html:hover .plugin-container::-webkit-scrollbar-thumb:hover {
+        background: #727272;
+      }
+      html:hover .plugin-container::-webkit-scrollbar-thumb:active {
+        background: #a7a7a7;
+      }
+
       /* variant of the tip when the window is docked to the bottom */
       body.is-docked-to-bottom #app {
         margin-top: 3px;
@@ -365,12 +411,14 @@
         ></app-item>
         <div class="separator"></div>
       </div>
-      <plugin-item
-        v-if="!showConfig"
-        v-for="plugin in plugins"
-        :key="plugin.name"
-        :plugin="plugin"
-      ></plugin-item>
+      <div class="plugin-container">
+        <plugin-item
+          v-if="!showConfig"
+          v-for="plugin in plugins"
+          :key="plugin.name"
+          :plugin="plugin"
+        ></plugin-item>
+      </div>
       <grid-config v-if="showConfig"></grid-config>
       <div id="grid-version"></div>
     </div>