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 (
{ const { offsetWidth } = el; - const { marginRight } = getElementDimensions(el); + const marginRight = parseInt(getComputedStyle(el).marginRight, 10); return acc + (offsetWidth + marginRight); }, 0); diff --git a/src/utils.js b/src/utils.js index aa79351fc6..9c2c9189b9 100644 --- a/src/utils.js +++ b/src/utils.js @@ -63,21 +63,3 @@ export function utfEncodeString(string: string): Uint32Array { function toCodePoint(string: string) { return string.codePointAt(0); } - -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], - }; -}