From 7f03db596fce94c53315db0745bfd66a9023cb33 Mon Sep 17 00:00:00 2001
From: Stephen Scott <me@suchipi.com>
Date: Sat, 18 Feb 2017 00:33:46 -0700
Subject: [PATCH 1/4] Add test app that nests iframes

---
 test/nested-frames/.gitignore        |  1 +
 test/nested-frames/target.js         | 42 ++++++++++++++++++++++++++++
 test/nested-frames/webpack.config.js | 29 +++++++++++++++++++
 3 files changed, 72 insertions(+)
 create mode 100644 test/nested-frames/.gitignore
 create mode 100644 test/nested-frames/target.js
 create mode 100644 test/nested-frames/webpack.config.js

diff --git a/test/nested-frames/.gitignore b/test/nested-frames/.gitignore
new file mode 100644
index 0000000000..378eac25d3
--- /dev/null
+++ b/test/nested-frames/.gitignore
@@ -0,0 +1 @@
+build
diff --git a/test/nested-frames/target.js b/test/nested-frames/target.js
new file mode 100644
index 0000000000..5b1be8680d
--- /dev/null
+++ b/test/nested-frames/target.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ */
+'use strict';
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+class InnerContent extends React.Component {
+  render() {
+    return (
+      <div>Inner content</div>
+    );
+  }
+}
+
+class OuterWrapper extends React.Component {
+  componentDidMount() {
+    const node = document.createElement('div');
+    this.frame.contentDocument.body.appendChild(node);
+    ReactDOM.render(<InnerContent />, node);
+  }
+
+  render() {
+    return (
+      <div>
+        <div>Iframe below</div>
+        <iframe ref={(frame) => this.frame = frame} />
+      </div>
+    );
+  }
+}
+
+var node = document.createElement('div');
+document.body.appendChild(node);
+ReactDOM.render(<OuterWrapper />, node);
diff --git a/test/nested-frames/webpack.config.js b/test/nested-frames/webpack.config.js
new file mode 100644
index 0000000000..20fa457937
--- /dev/null
+++ b/test/nested-frames/webpack.config.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ */
+'use strict';
+
+module.exports = {
+  devtool: 'cheap-module-eval-source-map',
+  entry: {
+    target: './target.js',
+  },
+  output: {
+    path: __dirname + '/build',
+    filename: '[name].js',
+  },
+
+  module: {
+    loaders: [{
+      test: /\.js$/,
+      loader:  'babel',
+      exclude: /node_modules/,
+    }],
+  },
+};

From ab02637d48617a964cec1817f79ef4c05c293f13 Mon Sep 17 00:00:00 2001
From: Stephen Scott <me@suchipi.com>
Date: Sat, 18 Feb 2017 03:11:33 -0700
Subject: [PATCH 2/4] Check intermediate iframes when calculating Overlay rect
 (#443)

---
 frontend/Highlighter/Overlay.js | 97 ++++++++++++++++++++++++++++++++-
 frontend/types.js               | 27 ++++++---
 test/nested-frames/target.js    | 25 +++++++--
 3 files changed, 135 insertions(+), 14 deletions(-)

diff --git a/frontend/Highlighter/Overlay.js b/frontend/Highlighter/Overlay.js
index cd38cc987c..feb926ce56 100644
--- a/frontend/Highlighter/Overlay.js
+++ b/frontend/Highlighter/Overlay.js
@@ -11,7 +11,7 @@
 'use strict';
 
 var assign = require('object-assign');
-import type {DOMNode} from '../types';
+import type {DOMNode, DOMRect, Window} from '../types';
 
 class Overlay {
   win: Object;
@@ -89,7 +89,7 @@ class Overlay {
     if (node.nodeType !== Node.ELEMENT_NODE) {
       return;
     }
-    var box = node.getBoundingClientRect();
+    var box = getNestedBoundingClientRect(node, this.win);
     var dims = getElementDimensions(node);
 
     boxWrap(dims, 'margin', this.node);
@@ -169,6 +169,99 @@ function getElementDimensions(element) {
   };
 }
 
+// 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).
+function getOwnerWindow(node: DOMNode): Window | null {
+  if (!node.ownerDocument) {
+    return null;
+  }
+  return node.ownerDocument.defaultView;
+}
+
+// Get the iframe containing a node, or return null if it cannot
+// be found (node not within iframe, etc).
+function getOwnerIframe(node: DOMNode): DOMNode | null {
+  var nodeWindow = getOwnerWindow(node);
+  if (nodeWindow) {
+    return nodeWindow.frameElement;
+  }
+  return null;
+}
+
+// Get a bounding client rect for a node, with an
+// offset added to compensate for its border.
+function getBoundingClientRectWithBorderOffset(node: DOMNode) {
+  var dimensions = getElementDimensions(node);
+
+  return mergeRectOffsets([
+    node.getBoundingClientRect(),
+    {
+      top: dimensions.borderTop,
+      left: dimensions.borderLeft,
+      bottom: dimensions.borderBottom,
+      right: dimensions.borderRight,
+      // This width and height won't get used by mergeRectOffsets (since this
+      // is not the first rect in the array), but we set them so that this
+      // object typechecks as a DOMRect.
+      width: 0,
+      height: 0,
+    },
+  ]);
+}
+
+// Add together the top, left, bottom, and right properties of
+// each DOMRect, but keep the width and height of the first one.
+function mergeRectOffsets(rects: Array<DOMRect>): DOMRect {
+  return rects.reduce((previousRect, rect) => {
+    if (previousRect == null) {
+      return rect;
+    }
+
+    return {
+      top: previousRect.top + rect.top,
+      left: previousRect.left + rect.left,
+      width: previousRect.width,
+      height: previousRect.height,
+      bottom: previousRect.bottom + rect.bottom,
+      right: previousRect.right + rect.right,
+    };
+  });
+}
+
+// Calculate a boundingClientRect for a node relative to boundaryWindow,
+// taking into account any offsets caused by intermediate iframes.
+function getNestedBoundingClientRect(node: DOMNode, boundaryWindow: Window): DOMRect {
+  var ownerIframe = getOwnerIframe(node);
+  if (
+    ownerIframe &&
+    ownerIframe !== boundaryWindow
+  ) {
+    var rects = [node.getBoundingClientRect()];
+    var currentIframe = getOwnerIframe(node);
+    var onlyOneMore = false;
+    while (currentIframe) {
+      var rect = getBoundingClientRectWithBorderOffset(currentIframe);
+      rects.push(rect);
+      currentIframe = getOwnerIframe(currentIframe);
+
+      if (onlyOneMore) {
+        break;
+      }
+      // We don't want to calculate iframe offsets upwards beyond
+      // the iframe containing the boundaryWindow, but we
+      // need to calculate the offset relative to the boundaryWindow.
+      if (currentIframe && getOwnerWindow(currentIframe) === boundaryWindow) {
+        onlyOneMore = true;
+      }
+    }
+
+    return mergeRectOffsets(rects);
+  } else {
+    return node.getBoundingClientRect();
+  }
+}
+
 function boxWrap(dims, what, node) {
   assign(node.style, {
     borderTopWidth: dims[what + 'Top'] + 'px',
diff --git a/frontend/types.js b/frontend/types.js
index db8a882f07..8d8f0d81d2 100644
--- a/frontend/types.js
+++ b/frontend/types.js
@@ -17,17 +17,18 @@ export type Dest = 'firstChild' | 'lastChild' | 'prevSibling' | 'nextSibling' |
 
 export type ElementID = string;
 
+export type Window = {
+  frameElement: DOMNode | null,
+};
+
+export type Document = {
+  defaultView: Window | null,
+};
+
 export type DOMNode = {
   appendChild: (child: DOMNode) => void,
   childNodes: Array<DOMNode>,
-  getBoundingClientRect: () => {
-    top: number,
-    left: number,
-    width: number,
-    height: number,
-    bottom: number,
-    right: number,
-  },
+  getBoundingClientRect: () => DOMRect,
   innerHTML: string,
   innerText: string,
   nodeName: string,
@@ -48,6 +49,7 @@ export type DOMNode = {
   style: Object,
   textContent: string,
   value: string,
+  ownerDocument: Document | null,
 };
 
 export type DOMEvent = {
@@ -61,6 +63,15 @@ export type DOMEvent = {
   target: DOMNode,
 };
 
+export type DOMRect = {
+  top: number,
+  left: number,
+  width: number,
+  height: number,
+  bottom: number,
+  right: number,
+};
+
 export type ControlState = {
   enabled: boolean,
 } & Record;
diff --git a/test/nested-frames/target.js b/test/nested-frames/target.js
index 5b1be8680d..9513d0fddc 100644
--- a/test/nested-frames/target.js
+++ b/test/nested-frames/target.js
@@ -20,23 +20,40 @@ class InnerContent extends React.Component {
   }
 }
 
-class OuterWrapper extends React.Component {
+class IframeWrapper extends React.Component {
   componentDidMount() {
     const node = document.createElement('div');
     this.frame.contentDocument.body.appendChild(node);
-    ReactDOM.render(<InnerContent />, node);
+    ReactDOM.render(this.props.children, node);
   }
 
   render() {
+    var { children, ...props } = this.props; // eslint-disable-line no-unused-vars
+
     return (
       <div>
         <div>Iframe below</div>
-        <iframe ref={(frame) => this.frame = frame} />
+        <iframe ref={(frame) => this.frame = frame} {...props} />
       </div>
     );
   }
 }
 
 var node = document.createElement('div');
+var node2 = document.createElement('div');
 document.body.appendChild(node);
-ReactDOM.render(<OuterWrapper />, node);
+document.body.appendChild(node2);
+
+ReactDOM.render(
+  <IframeWrapper>
+    <IframeWrapper frameBorder="0">
+      <InnerContent />
+    </IframeWrapper>
+  </IframeWrapper>
+, node);
+
+ReactDOM.render(
+  <IframeWrapper>
+    <InnerContent />
+  </IframeWrapper>
+, node2);

From d16bec5bdc8d4adf240ad15c4fc4a7cd41b6aecf Mon Sep 17 00:00:00 2001
From: Stephen Scott <me@suchipi.com>
Date: Tue, 21 Feb 2017 19:18:14 -0700
Subject: [PATCH 3/4] Reuse reference to iframe node

---
 frontend/Highlighter/Overlay.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/Highlighter/Overlay.js b/frontend/Highlighter/Overlay.js
index feb926ce56..c05473a8a3 100644
--- a/frontend/Highlighter/Overlay.js
+++ b/frontend/Highlighter/Overlay.js
@@ -238,7 +238,7 @@ function getNestedBoundingClientRect(node: DOMNode, boundaryWindow: Window): DOM
     ownerIframe !== boundaryWindow
   ) {
     var rects = [node.getBoundingClientRect()];
-    var currentIframe = getOwnerIframe(node);
+    var currentIframe = ownerIframe;
     var onlyOneMore = false;
     while (currentIframe) {
       var rect = getBoundingClientRectWithBorderOffset(currentIframe);

From 2ff31050c8f857689a704a738532c4e7f24c9843 Mon Sep 17 00:00:00 2001
From: Stephen Scott <me@suchipi.com>
Date: Tue, 21 Feb 2017 19:20:33 -0700
Subject: [PATCH 4/4] Move nested frames examples to sink

---
 test/example/sink.js                 | 57 +++++++++++++++++++++++++++
 test/nested-frames/.gitignore        |  1 -
 test/nested-frames/target.js         | 59 ----------------------------
 test/nested-frames/webpack.config.js | 29 --------------
 4 files changed, 57 insertions(+), 89 deletions(-)
 delete mode 100644 test/nested-frames/.gitignore
 delete mode 100644 test/nested-frames/target.js
 delete mode 100644 test/nested-frames/webpack.config.js

diff --git a/test/example/sink.js b/test/example/sink.js
index d2e29e1d18..31e023d807 100644
--- a/test/example/sink.js
+++ b/test/example/sink.js
@@ -136,6 +136,61 @@ class LotsOfMounts extends React.Component {
   }
 }
 
+class IframeWrapper extends React.Component {
+  componentDidMount() {
+    this.root = document.createElement('div');
+    this.frame.contentDocument.body.appendChild(this.root);
+    ReactDOM.render(this.props.children, this.root);
+  }
+
+  componentWillUnmount() {
+    ReactDOM.unmountComponentAtNode(this.root);
+  }
+
+  render() {
+    var { children, ...props } = this.props; // eslint-disable-line no-unused-vars
+
+    return (
+      <div>
+        <div>Iframe below</div>
+        <iframe ref={frame => this.frame = frame} {...props} />
+      </div>
+    );
+  }
+}
+
+class InnerContent extends React.Component {
+  render() {
+    return (
+      <div>
+        Inner content (highlight should overlap properly)
+      </div>
+    );
+  }
+}
+
+class IframeWithMountedChild extends React.Component {
+  render() {
+    return (
+      <IframeWrapper>
+        <InnerContent />
+      </IframeWrapper>
+    );
+  }
+}
+
+class NestedMountedIframesWithVaryingBorder extends React.Component {
+  render() {
+    return (
+      <IframeWrapper>
+        <IframeWrapper frameBorder="0">
+          <InnerContent />
+        </IframeWrapper>
+      </IframeWrapper>
+    );
+  }
+}
+
 // Render the list of tests
 
 class Sink extends React.Component {
@@ -147,6 +202,8 @@ class Sink extends React.Component {
       BadUnmount,
       Nester,
       LotsOfMounts,
+      IframeWithMountedChild,
+      NestedMountedIframesWithVaryingBorder,
     };
 
     var view = Comp => run(View, {Comp});
diff --git a/test/nested-frames/.gitignore b/test/nested-frames/.gitignore
deleted file mode 100644
index 378eac25d3..0000000000
--- a/test/nested-frames/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-build
diff --git a/test/nested-frames/target.js b/test/nested-frames/target.js
deleted file mode 100644
index 9513d0fddc..0000000000
--- a/test/nested-frames/target.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- */
-'use strict';
-
-var React = require('react');
-var ReactDOM = require('react-dom');
-
-class InnerContent extends React.Component {
-  render() {
-    return (
-      <div>Inner content</div>
-    );
-  }
-}
-
-class IframeWrapper extends React.Component {
-  componentDidMount() {
-    const node = document.createElement('div');
-    this.frame.contentDocument.body.appendChild(node);
-    ReactDOM.render(this.props.children, node);
-  }
-
-  render() {
-    var { children, ...props } = this.props; // eslint-disable-line no-unused-vars
-
-    return (
-      <div>
-        <div>Iframe below</div>
-        <iframe ref={(frame) => this.frame = frame} {...props} />
-      </div>
-    );
-  }
-}
-
-var node = document.createElement('div');
-var node2 = document.createElement('div');
-document.body.appendChild(node);
-document.body.appendChild(node2);
-
-ReactDOM.render(
-  <IframeWrapper>
-    <IframeWrapper frameBorder="0">
-      <InnerContent />
-    </IframeWrapper>
-  </IframeWrapper>
-, node);
-
-ReactDOM.render(
-  <IframeWrapper>
-    <InnerContent />
-  </IframeWrapper>
-, node2);
diff --git a/test/nested-frames/webpack.config.js b/test/nested-frames/webpack.config.js
deleted file mode 100644
index 20fa457937..0000000000
--- a/test/nested-frames/webpack.config.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- */
-'use strict';
-
-module.exports = {
-  devtool: 'cheap-module-eval-source-map',
-  entry: {
-    target: './target.js',
-  },
-  output: {
-    path: __dirname + '/build',
-    filename: '[name].js',
-  },
-
-  module: {
-    loaders: [{
-      test: /\.js$/,
-      loader:  'babel',
-      exclude: /node_modules/,
-    }],
-  },
-};