From 5217f7a34f2ddf863fc4c8bdafe7c85135afb63b Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Sat, 24 Aug 2013 09:08:17 -0700
Subject: [PATCH] Fix walkthrough on Firefox (#1743)

---
 js/id/id.js                  | 7 +++++++
 js/id/ui/intro.js            | 4 ++--
 js/id/ui/intro/navigation.js | 2 +-
 js/id/ui/radial_menu.js      | 4 +---
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/js/id/id.js b/js/id/id.js
index 6f43b5ee2..0c7e16052 100644
--- a/js/id/id.js
+++ b/js/id/id.js
@@ -183,6 +183,13 @@ window.iD = function () {
     context.zoomIn = map.zoomIn;
     context.zoomOut = map.zoomOut;
 
+    context.surfaceRect = function() {
+        // Work around a bug in Firefox.
+        //   http://stackoverflow.com/questions/18153989/
+        //   https://bugzilla.mozilla.org/show_bug.cgi?id=530985
+        return context.surface().node().parentNode.getBoundingClientRect();
+    };
+
     /* Presets */
     var presets = iD.presets()
         .load(iD.data.presets);
diff --git a/js/id/ui/intro.js b/js/id/ui/intro.js
index 0ce6c778b..c44b5c056 100644
--- a/js/id/ui/intro.js
+++ b/js/id/ui/intro.js
@@ -105,7 +105,7 @@ iD.ui.intro = function(context) {
 };
 
 iD.ui.intro.pointBox = function(point, context) {
-    var rect = context.surface().node().getBoundingClientRect();
+    var rect = context.surfaceRect();
     point = context.projection(point);
     return {
         left: point[0] + rect.left - 30,
@@ -117,7 +117,7 @@ iD.ui.intro.pointBox = function(point, context) {
 
 iD.ui.intro.pad = function(box, padding, context) {
     if (box instanceof Array) {
-        var rect = context.surface().node().getBoundingClientRect();
+        var rect = context.surfaceRect();
         box = context.projection(box);
         box = {
             left: box[0] + rect.left,
diff --git a/js/id/ui/intro/navigation.js b/js/id/ui/intro/navigation.js
index 7a045b5b2..a52883872 100644
--- a/js/id/ui/intro/navigation.js
+++ b/js/id/ui/intro/navigation.js
@@ -23,7 +23,7 @@ iD.ui.intro.navigation = function(context, reveal) {
 
     step.enter = function() {
 
-        var rect = context.surface().node().getBoundingClientRect(),
+        var rect = context.surfaceRect(),
             map = {
                 left: rect.left + 10,
                 top: rect.top + 70,
diff --git a/js/id/ui/radial_menu.js b/js/id/ui/radial_menu.js
index 7901ead73..3a05ed66e 100644
--- a/js/id/ui/radial_menu.js
+++ b/js/id/ui/radial_menu.js
@@ -66,9 +66,7 @@ iD.ui.RadialMenu = function(context, operations) {
             .attr('class', 'tooltip-inner radial-menu-tooltip');
 
         function mouseover(d, i) {
-            // Avoid getBoundingClientRect on SVG element; browser implementations
-            // differ: http://stackoverflow.com/questions/18153989/
-            var rect = context.surface().node().parentNode.getBoundingClientRect(),
+            var rect = context.surfaceRect(),
                 angle = a0 + i * a,
                 dx = rect.left - (angle < 0 ? 200 : 0),
                 dy = rect.top;