Moved getElementDimensions() back into Overlay component

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).

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 (
       <div
         className={classNames(styles.ElementsBar, {
@@ -122,7 +118,7 @@ export default function OwnerStack() {
     const elements = Array.from(elementsBarRef.current.children);
     const elementsTotalWidth = elements.reduce((acc, el) => {
       const { offsetWidth } = el;
-      const { marginRight } = getElementDimensions(el);
+      const marginRight = parseInt(getComputedStyle(el).marginRight, 10);
       return acc + (offsetWidth + marginRight);
     }, 0);
 

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],
-  };
-}