use getBoundingClientRect instead of custom fn

Author: jaredly

frontend/Highlighter/MultiOverlay.js

@@ -10,7 +10,6 @@
  */
 'use strict';
 
-var nodePos = require('./nodePos');
 var setStyle = require('./setStyle');
 
 import type {DOMNode} from '../types';
@@ -30,12 +29,12 @@ class MultiOverlay {
     this.container.innerHTML = '';
     nodes.forEach(node => {
       var div = this.win.document.createElement('div');
-      var pos = nodePos(node);
+      var box = node.getBoundingClientRect();
       setStyle(div, {
-        top: pos.top + 'px',
-        left: pos.left + 'px',
-        width: node.offsetWidth + 'px',
-        height: node.offsetHeight + 'px',
+        top: box.top + 'px',
+        left: box.left + 'px',
+        width: box.width + 'px',
+        height: box.height + 'px',
         border: '2px dotted rgba(200, 100, 100, .8)',
         boxSizing: 'border-box',
         backgroundColor: 'rgba(200, 100, 100, .2)',

frontend/Highlighter/Overlay.js

@@ -10,7 +10,6 @@
  */
 'use strict';
 
-var nodePos = require('./nodePos');
 var setStyle = require('./setStyle');
 
 import type {DOMNode} from '../types';
@@ -86,31 +85,31 @@ class Overlay {
   }
 
   inspect(node: DOMNode, name?: ?string) {
-    var pos = nodePos(node);
+    var box = node.getBoundingClientRect();
     var dims = getElementDimensions(node);
 
     boxWrap(dims, 'margin', this.node);
     boxWrap(dims, 'border', this.border);
     boxWrap(dims, 'padding', this.padding);
 
     setStyle(this.content, {
-      height: node.offsetHeight - dims.borderTop - dims.borderBottom - dims.paddingTop - dims.paddingBottom + 'px',
-      width: node.offsetWidth - dims.borderLeft - dims.borderRight - dims.paddingLeft - dims.paddingRight + 'px',
+      height: box.height - dims.borderTop - dims.borderBottom - dims.paddingTop - dims.paddingBottom + 'px',
+      width: box.width - dims.borderLeft - dims.borderRight - dims.paddingLeft - dims.paddingRight + 'px',
     });
 
     setStyle(this.node, {
-      top: pos.top - dims.marginTop + 'px',
-      left: pos.left - dims.marginLeft + 'px',
+      top: box.top - dims.marginTop + 'px',
+      left: box.left - dims.marginLeft + 'px',
     });
 
     this.nameSpan.textContent = (name || node.nodeName.toLowerCase());
-    this.dimSpan.textContent = node.offsetWidth + 'px × ' + node.offsetHeight + 'px';
+    this.dimSpan.textContent = box.width + 'px × ' + box.height + 'px';
 
     var tipPos = findTipPos({
-      top: pos.top - dims.marginTop,
-      left: pos.left - dims.marginLeft,
-      height: node.offsetHeight + dims.marginTop + dims.marginBottom,
-      width: node.offsetWidth + dims.marginLeft + dims.marginRight,
+      top: box.top - dims.marginTop,
+      left: box.left - dims.marginLeft,
+      height: box.height + dims.marginTop + dims.marginBottom,
+      width: box.width + dims.marginLeft + dims.marginRight,
     }, this.win);
     setStyle(this.tip, tipPos);
   }

frontend/Highlighter/nodePos.js

@@ -23,6 +23,14 @@ export type DOMNode = {
   offsetHeight: number,
   offsetWidth: number,
   offsetParent: ?DOMNode,
+  getBoundingClientRect: () => {
+    top: number,
+    left: number,
+    width: number,
+    height: number,
+    bottom: number,
+    right: number,
+  },
   onclick?: (evt: DOMEvent) => void,
   scrollLeft: number,
   scrollTop: number,