diff --git a/src/backend/views/Overlay.js b/src/backend/views/Overlay.js index a54547e525..90e7446461 100644 --- a/src/backend/views/Overlay.js +++ b/src/backend/views/Overlay.js @@ -1,7 +1,6 @@ // @flow import assign from 'object-assign'; -import { getElementDimensions } from '../../utils'; type Rect = { bottom: number, @@ -216,6 +215,24 @@ function findTipPos(dims, win) { return { top, left: dims.left + margin + 'px' }; } +export function getElementDimensions(domElement: Element) { + const calculatedStyle = window.getComputedStyle(domElement); + return { + borderLeft: +calculatedStyle.borderLeftWidth.match(/[0-9]*/)[0], + borderRight: +calculatedStyle.borderRightWidth.match(/[0-9]*/)[0], + borderTop: +calculatedStyle.borderTopWidth.match(/[0-9]*/)[0], + borderBottom: +calculatedStyle.borderBottomWidth.match(/[0-9]*/)[0], + marginLeft: +calculatedStyle.marginLeft.match(/[0-9]*/)[0], + marginRight: +calculatedStyle.marginRight.match(/[0-9]*/)[0], + marginTop: +calculatedStyle.marginTop.match(/[0-9]*/)[0], + marginBottom: +calculatedStyle.marginBottom.match(/[0-9]*/)[0], + paddingLeft: +calculatedStyle.paddingLeft.match(/[0-9]*/)[0], + paddingRight: +calculatedStyle.paddingRight.match(/[0-9]*/)[0], + paddingTop: +calculatedStyle.paddingTop.match(/[0-9]*/)[0], + paddingBottom: +calculatedStyle.paddingBottom.match(/[0-9]*/)[0], + }; +} + // Get the window object for the document that a node belongs to, // or return null if it cannot be found (node not attached to DOM, // etc). diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js index 295c3fd97d..2fabc1e7fb 100644 --- a/src/devtools/views/Components/OwnersStack.js +++ b/src/devtools/views/Components/OwnersStack.js @@ -13,7 +13,6 @@ import Button from '../Button'; import ButtonIcon from '../ButtonIcon'; import { TreeContext } from './TreeContext'; import { StoreContext } from '../context'; -import { getElementDimensions } from '../../../utils'; import type { Element } from './types'; @@ -58,10 +57,7 @@ type ElementsBarProps = { showSelectedOnly: boolean, }; const ElementsBar = forwardRef( - ( - { elements, showSelectedOnly }: ElementsBarProps, - ref: Object - ) => { + ({ elements, showSelectedOnly }: ElementsBarProps, ref: Object) => { return (