Merge pull request #4837 from maaz93/magic-number

Fixing magic number bug in downloads bar
brave · Oct 17, 2016 · 75b91b4 · 75b91b4
2 parents 8b6606f + 1a1b658
commit 75b91b4
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 deletions.
diff --git a/js/components/frame.js b/js/components/frame.js
@@ -628,8 +628,11 @@ class Frame extends ImmutableComponent {
       e.stopPropagation()
     })
     this.webview.addEventListener('update-target-url', (e) => {
-      const downloadsBarHeight = 50
-      let nearBottom = e.y > (window.innerHeight - 150 - downloadsBarHeight) // todo: magic number
+      if (!this.root) {
+        this.root = window.getComputedStyle(document.querySelector(':root'))
+        this.downloadsBarHeight = Number.parseInt(this.root.getPropertyValue('--downloads-bar-height'), 10)
+      }
+      let nearBottom = e.y > (window.innerHeight - 150 - this.downloadsBarHeight)
       let mouseOnLeft = e.x < (window.innerWidth / 2)
       let showOnRight = nearBottom && mouseOnLeft
       windowActions.setLinkHoverPreview(e.url, showOnRight)

diff --git a/js/contextMenus.js b/js/contextMenus.js
@@ -67,6 +67,11 @@ const addFolderMenuItem = (closestDestinationDetail, isParent) => {
   }
 }
 
+const getDownloadsBarHeight = () => {
+  const root = window.getComputedStyle(document.querySelector(':root'))
+  return Number.parseInt(root.getPropertyValue('--downloads-bar-height'), 10)
+}
+
 function tabPageTemplateInit (framePropsList) {
   return [{
     label: locale.translation('unmuteTabs'),
@@ -1202,8 +1207,7 @@ function onShowBookmarkFolderMenu (bookmarks, bookmark, activeFrame, e) {
  */
 function onShowUsernameMenu (usernames, origin, action, boundingRect,
                                     topOffset) {
-  // TODO: magic number
-  const downloadsBarOffset = windowStore.getState().getIn(['ui', 'downloadsToolbar', 'isVisible']) ? 50 : 0
+  const downloadsBarOffset = windowStore.getState().getIn(['ui', 'downloadsToolbar', 'isVisible']) ? getDownloadsBarHeight() : 0
   const menuTemplate = usernameTemplateInit(usernames, origin, action)
   windowActions.setContextMenuDetail(Immutable.fromJS({
     left: boundingRect.left,
@@ -1214,8 +1218,7 @@ function onShowUsernameMenu (usernames, origin, action, boundingRect,
 
 function onShowAutofillMenu (suggestions, boundingRect, frame) {
   const menuTemplate = autofillTemplateInit(suggestions, frame)
-  // TODO: magic number
-  const downloadsBarOffset = windowStore.getState().getIn(['ui', 'downloadsToolbar', 'isVisible']) ? 50 : 0
+  const downloadsBarOffset = windowStore.getState().getIn(['ui', 'downloadsToolbar', 'isVisible']) ? getDownloadsBarHeight() : 0
   const offset = {
     x: (window.innerWidth - boundingRect.clientWidth),
     y: (window.innerHeight - boundingRect.clientHeight)

diff --git a/less/downloadBar.less b/less/downloadBar.less
@@ -19,7 +19,7 @@
   border-top: 1px solid #888;
   color: black;
   display: flex;
-  height: 50px;
+  height: @downloadsBarHeight;
   padding: 5px var(--download-bar-padding);
   width: 100%;
   z-index: @zindexDownloadsBar;

diff --git a/less/variables.less b/less/variables.less
@@ -63,6 +63,7 @@
 @switchNubShadow: 1px 1px 5px -2px black;
 
 @navbarHeight: 36px;
+@downloadsBarHeight: 50px;
 @tabsToolbarHeight: 23px;
 @tabPagesHeight: 12px;
 @bookmarksToolbarHeight: 24px;
@@ -144,4 +145,5 @@
 
 :root {
   --navbar-height: @navbarHeight;
+  --downloads-bar-height: @downloadsBarHeight;
 }