From b781c160212482c427e398d5f4af69d7dce21356 Mon Sep 17 00:00:00 2001
From: NejcZdovc <nejc.zdovc@3zsistemi.si>
Date: Sun, 12 Mar 2017 11:56:44 +0100
Subject: [PATCH] Removes unnecessary width/height

Resolves #7403
Resolves #7662
Resolves #1589

Auditors: @bsclifton

Test Plan:
- specified in the issue #7403
---
 js/components/contextMenu.js | 15 ++++++++++++---
 less/contextMenu.less        | 12 ++++++++++--
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/js/components/contextMenu.js b/js/components/contextMenu.js
index cb14b711681..c3baaf7a1cb 100644
--- a/js/components/contextMenu.js
+++ b/js/components/contextMenu.js
@@ -94,7 +94,7 @@ class ContextMenuItem extends ImmutableComponent {
       const parentBoundingRect = parentNode.getBoundingClientRect()
       const boundingRect = node.getBoundingClientRect()
       openedSubmenuDetails = openedSubmenuDetails.push(Immutable.fromJS({
-        y: boundingRect.top - parentBoundingRect.top - 1,
+        y: boundingRect.top - parentBoundingRect.top - 1 + parentNode.scrollTop,
         template: this.submenu
       }))
     }
@@ -218,7 +218,7 @@ class ContextMenuSingle extends ImmutableComponent {
   render () {
     const styles = {}
     if (this.props.y) {
-      styles.top = this.props.y
+      styles.marginTop = this.props.y
     }
     const visibleMenuItems = this.props.template.filter((element) => {
       return element.has('visible')
@@ -265,6 +265,10 @@ class ContextMenu extends ImmutableComponent {
   componentDidMount () {
     window.addEventListener('keydown', this.onKeyDown)
     window.addEventListener('keyup', this.onKeyUp)
+
+    if (this.node) {
+      this.node.addEventListener('auxclick', this.onAuxClick.bind(this))
+    }
   }
 
   componentWillUnmount () {
@@ -381,6 +385,10 @@ class ContextMenu extends ImmutableComponent {
     setImmediate(() => windowActions.resetMenuState())
   }
 
+  onAuxClick () {
+    setImmediate(() => windowActions.resetMenuState())
+  }
+
   getTemplateItemsOnly (template) {
     return template.filter((element) => {
       if (element.get('type') === separatorMenuItem.type) return false
@@ -443,7 +451,7 @@ class ContextMenu extends ImmutableComponent {
       styles.right = this.props.contextMenuDetail.get('right')
     }
     if (this.props.contextMenuDetail.get('top') !== undefined) {
-      styles.top = this.props.contextMenuDetail.get('top')
+      styles.marginTop = this.props.contextMenuDetail.get('top')
     }
     if (this.props.contextMenuDetail.get('bottom') !== undefined) {
       styles.bottom = this.props.contextMenuDetail.get('bottom')
@@ -455,6 +463,7 @@ class ContextMenu extends ImmutableComponent {
       styles.maxHeight = this.props.contextMenuDetail.get('maxHeight')
     }
     return <div
+      ref={(node) => { this.node = node }}
       className={cx({
         contextMenu: true,
         reverseExpand: this.props.contextMenuDetail.get('right') !== undefined,
diff --git a/less/contextMenu.less b/less/contextMenu.less
index 6da9dc8f09e..360023dc4e5 100644
--- a/less/contextMenu.less
+++ b/less/contextMenu.less
@@ -20,16 +20,24 @@
   }
   // This is a reasonable max height and also solves problems for bookmarks menu
   // and bookmarks overflow menu reaching down too low.
-  height: 100%;
-  width: 100%;
+  min-width: 225px;
   @usedUpChrome: @navbarHeight + @bookmarksToolbarWithFaviconsHeight;
   max-height: calc(~'100% - @{usedUpChrome}');
   overflow: auto;
   position: absolute;
   z-index: @zindexContextMenu;
+  padding-right: 10px;
+  padding-bottom: 10px;
   -webkit-user-select: none;
+
+  &::-webkit-scrollbar {
+    background-color: transparent;
+  }
+
   &.reverseExpand {
     flex-direction: row-reverse;
+    padding-right: 0;
+    padding-left: 10px;
   }
 
   .contextMenuSingle {