From c36af01fc17c4194562372680c014a727a3c5e57 Mon Sep 17 00:00:00 2001 From: Anthony Tseng Date: Mon, 22 May 2017 12:27:09 -0700 Subject: [PATCH] Fix coordinate calculation and apply toolbar UI scale to target element fix #8870 Auditors: @bsclifton, @bbondy Test Plan: 1. Go to about:preferences#advanced and change different UI scales 2. Go to any sites can trigger autofill popup or username/password popup 3. The context menu location should be just below the target element --- app/renderer/components/frame/frame.js | 2 +- js/contextMenus.js | 13 ++++++------- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/app/renderer/components/frame/frame.js b/app/renderer/components/frame/frame.js index a9788e66abb..5d8a9127dc1 100644 --- a/app/renderer/components/frame/frame.js +++ b/app/renderer/components/frame/frame.js @@ -548,7 +548,7 @@ class Frame extends React.Component { if (this.frame.isEmpty()) { return } - contextMenus.onShowAutofillMenu(e.suggestions, e.rect, this.frame) + contextMenus.onShowAutofillMenu(e.suggestions, e.rect, this.frame, e.target.getBoundingClientRect()) }) this.webview.addEventListener('hide-autofill-popup', (e) => { if (this.props.isAutFillContextMenu) { diff --git a/js/contextMenus.js b/js/contextMenus.js index 78c163e8627..c4c37bb6777 100644 --- a/js/contextMenus.js +++ b/js/contextMenus.js @@ -1453,20 +1453,19 @@ function onShowBookmarkFolderMenu (bookmarks, bookmark, activeFrame, e) { })) } -function onShowAutofillMenu (suggestions, boundingRect, frame) { +function onShowAutofillMenu (suggestions, targetRect, frame, boundingClientRect) { const menuTemplate = autofillTemplateInit(suggestions, frame) const downloadsBarOffset = windowStore.getState().getIn(['ui', 'downloadsToolbar', 'isVisible']) && appStore.state.get('downloads') && appStore.state.get('downloads').size ? getDownloadsBarHeight() : 0 - const offset = { - x: (window.innerWidth - boundingRect.clientWidth), - y: (window.innerHeight - boundingRect.clientHeight) - } + // toolbar UI scale ratio + const xRatio = window.innerWidth / window.outerWidth + const yRatio = window.innerHeight / window.outerHeight const tabId = frame.get('tabId') windowActions.setContextMenuDetail(Immutable.fromJS({ type: 'autofill', tabId, - left: offset.x + boundingRect.x, - top: offset.y + (boundingRect.y + boundingRect.height) - downloadsBarOffset, + left: boundingClientRect.left + (targetRect.x * xRatio), + top: boundingClientRect.top + ((targetRect.y + targetRect.height) * yRatio) - downloadsBarOffset, template: menuTemplate })) }