Moved getElementDimensions() back into Overlay component
Brian Vaughn committed
Apr 7, 2019 at 09:42 UTC
9a2f9ac880ef47e0195afa20a1f23993ce35c425
3 files changed
+20
-25
src/backend/views/Overlay.js
+18
-1
@@ -1,7 +1,6 @@
1
// @flow
2
3
import assign from 'object-assign';
4
-import { getElementDimensions } from '../../utils';
4
5
type Rect = {
6
bottom: number,
@@ -216,6 +215,24 @@ function findTipPos(dims, win) {
215
return { top, left: dims.left + margin + 'px' };
216
}
217
218
+export function getElementDimensions(domElement: Element) {
219
+ const calculatedStyle = window.getComputedStyle(domElement);
220
+ return {
221
+ borderLeft: +calculatedStyle.borderLeftWidth.match(/[0-9]*/)[0],
222
+ borderRight: +calculatedStyle.borderRightWidth.match(/[0-9]*/)[0],
223
+ borderTop: +calculatedStyle.borderTopWidth.match(/[0-9]*/)[0],
224
+ borderBottom: +calculatedStyle.borderBottomWidth.match(/[0-9]*/)[0],
225
+ marginLeft: +calculatedStyle.marginLeft.match(/[0-9]*/)[0],
226
+ marginRight: +calculatedStyle.marginRight.match(/[0-9]*/)[0],
227
+ marginTop: +calculatedStyle.marginTop.match(/[0-9]*/)[0],
228
+ marginBottom: +calculatedStyle.marginBottom.match(/[0-9]*/)[0],
229
+ paddingLeft: +calculatedStyle.paddingLeft.match(/[0-9]*/)[0],
230
+ paddingRight: +calculatedStyle.paddingRight.match(/[0-9]*/)[0],
231
+ paddingTop: +calculatedStyle.paddingTop.match(/[0-9]*/)[0],
232
+ paddingBottom: +calculatedStyle.paddingBottom.match(/[0-9]*/)[0],
233
+ };
234
+}
235
+
236
// Get the window object for the document that a node belongs to,
237
// or return null if it cannot be found (node not attached to DOM,
238
// etc).
src/devtools/views/Components/OwnersStack.js
+2
-6
@@ -13,7 +13,6 @@ import Button from '../Button';
13
import ButtonIcon from '../ButtonIcon';
14
import { TreeContext } from './TreeContext';
15
import { StoreContext } from '../context';
16
-import { getElementDimensions } from '../../../utils';
16
17
import type { Element } from './types';
18
@@ -58,10 +57,7 @@ type ElementsBarProps = {
57
showSelectedOnly: boolean,
58
};
59
const ElementsBar = forwardRef(
61
- (
62
- { elements, showSelectedOnly }: ElementsBarProps,
63
- ref: Object
64
- ) => {
60
+ ({ elements, showSelectedOnly }: ElementsBarProps, ref: Object) => {
61
return (
62
<div
63
className={classNames(styles.ElementsBar, {
@@ -122,7 +118,7 @@ export default function OwnerStack() {
118
const elements = Array.from(elementsBarRef.current.children);
119
const elementsTotalWidth = elements.reduce((acc, el) => {
120
const { offsetWidth } = el;
125
- const { marginRight } = getElementDimensions(el);
121
+ const marginRight = parseInt(getComputedStyle(el).marginRight, 10);
122
return acc + (offsetWidth + marginRight);
123
}, 0);
124
src/utils.js
-18
@@ -63,21 +63,3 @@ export function utfEncodeString(string: string): Uint32Array {
63
function toCodePoint(string: string) {
64
return string.codePointAt(0);
65
}
66
-
67
-export function getElementDimensions(domElement: Element) {
68
- const calculatedStyle = window.getComputedStyle(domElement);
69
- return {
70
- borderLeft: +calculatedStyle.borderLeftWidth.match(/[0-9]*/)[0],
71
- borderRight: +calculatedStyle.borderRightWidth.match(/[0-9]*/)[0],
72
- borderTop: +calculatedStyle.borderTopWidth.match(/[0-9]*/)[0],
73
- borderBottom: +calculatedStyle.borderBottomWidth.match(/[0-9]*/)[0],
74
- marginLeft: +calculatedStyle.marginLeft.match(/[0-9]*/)[0],
75
- marginRight: +calculatedStyle.marginRight.match(/[0-9]*/)[0],
76
- marginTop: +calculatedStyle.marginTop.match(/[0-9]*/)[0],
77
- marginBottom: +calculatedStyle.marginBottom.match(/[0-9]*/)[0],
78
- paddingLeft: +calculatedStyle.paddingLeft.match(/[0-9]*/)[0],
79
- paddingRight: +calculatedStyle.paddingRight.match(/[0-9]*/)[0],
80
- paddingTop: +calculatedStyle.paddingTop.match(/[0-9]*/)[0],
81
- paddingBottom: +calculatedStyle.paddingBottom.match(/[0-9]*/)[0],
82
- };
83
-}