From 24802c93990f8986793ce692c773fa06640c4598 Mon Sep 17 00:00:00 2001
From: Paul Annekov <paul.annekov@gmail.com>
Date: Fri, 10 Jul 2015 23:44:03 +0300
Subject: [PATCH 1/6] Added button to switch to full screen mode

---
 css/app.css             |  1 -
 dist/locales/en.json    |  3 +++
 index.html              |  1 +
 js/id/ui.js             |  4 +++
 js/id/ui/full_screen.js | 60 +++++++++++++++++++++++++++++++++++++++++
 5 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 js/id/ui/full_screen.js

diff --git a/css/app.css b/css/app.css
index c2cb031d4..08d939ccd 100644
--- a/css/app.css
+++ b/css/app.css
@@ -29,7 +29,6 @@ body {
 .id-container {
     height: 100%;
     width: 100%;
-    position: fixed;
     min-width: 768px;
 }
 
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 94adb4e45..c401c721d 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -430,6 +430,9 @@
             "help": "Another user changed some of the same map features you changed.\nClick on each item below for more details about the conflict, and choose whether to keep\nyour changes or the other user's changes.\n"
         }
     },
+    "full_screen": {
+        "title": "Full Screen"
+    },
     "merge_remote_changes": {
         "conflict": {
             "deleted": "This object has been deleted by {user}.",
diff --git a/index.html b/index.html
index cf71e0b9e..b54c337c6 100644
--- a/index.html
+++ b/index.html
@@ -99,6 +99,7 @@
         <script src='js/id/ui/flash.js'></script>
         <script src='js/id/ui/feature_info.js'></script>
         <script src='js/id/ui/save.js'></script>
+        <script src='js/id/ui/full_screen.js'></script>
         <script src='js/id/ui/scale.js'></script>
         <script src='js/id/ui/splash.js'></script>
         <script src='js/id/ui/spinner.js'></script>
diff --git a/js/id/ui.js b/js/id/ui.js
index 6d8534501..59f4f02d8 100644
--- a/js/id/ui.js
+++ b/js/id/ui.js
@@ -60,6 +60,10 @@ iD.ui = function(context) {
             .attr('class', 'button-wrap col1')
             .call(iD.ui.Save(context));
 
+        limiter.append('div')
+          .attr('class', 'button-wrap col1')
+          .call(iD.ui.FullScreen(context));
+
         bar.append('div')
             .attr('class', 'spinner')
             .call(iD.ui.Spinner(context));
diff --git a/js/id/ui/full_screen.js b/js/id/ui/full_screen.js
new file mode 100644
index 000000000..e5a01352d
--- /dev/null
+++ b/js/id/ui/full_screen.js
@@ -0,0 +1,60 @@
+iD.ui.FullScreen = function(context) {
+    var history = context.history(),
+        key = iD.ui.cmd('⌘S');
+
+    function saving() {
+        return context.mode().id === 'save';
+    }
+
+    function fullScreen() {
+        d3.event.preventDefault();
+        context.container().node().webkitRequestFullscreen();
+    }
+
+    return function(selection) {
+        /*var tooltip = bootstrap.tooltip()
+            .placement('bottom')
+            .html(true)
+            .title(iD.ui.tooltipHtml(t('save.no_changes'), key));*/
+
+        var button = selection.append('button')
+            .attr('class', 'save col12')
+            .attr('tabindex', -1)
+            .on('click', fullScreen)
+            /*.call(tooltip)*/;
+
+        button.append('span')
+            .attr('class', 'label')
+            .text(t('full_screen.title'));
+
+        /*var keybinding = d3.keybinding('undo-redo')
+            .on(key, save, true);*/
+
+        /*d3.select(document)
+            .call(keybinding);*/
+
+        var numChanges = 0;
+
+        context.history().on('change.save', function() {
+            var _ = history.difference().summary().length;
+            if (_ === numChanges)
+                return;
+            numChanges = _;
+
+            tooltip.title(iD.ui.tooltipHtml(t(numChanges > 0 ?
+                    'save.help' : 'save.no_changes'), key));
+
+            button
+                .classed('disabled', numChanges === 0)
+                .classed('has-count', numChanges > 0);
+
+            button.select('span.count')
+                .text(numChanges);
+        });
+
+        context.on('enter.save', function() {
+            button.property('disabled', saving());
+            if (saving()) button.call(tooltip.hide);
+        });
+    };
+};

From 61ac67ac6ca1530c95682b992d0431e0607fa82a Mon Sep 17 00:00:00 2001
From: Paul Annekov <paul.annekov@gmail.com>
Date: Sat, 11 Jul 2015 10:21:49 +0300
Subject: [PATCH 2/6] Added tooltip, cross browser requestFullScreen call and
 key binding

---
 dist/locales/en.json    |  3 ++-
 js/id/ui/full_screen.js | 49 ++++++++++++++++++++++++++++-------------
 2 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/dist/locales/en.json b/dist/locales/en.json
index c401c721d..f264d0416 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -431,7 +431,8 @@
         }
     },
     "full_screen": {
-        "title": "Full Screen"
+        "title": "Full Screen",
+        "tooltip": "Go to Full Screen mode"
     },
     "merge_remote_changes": {
         "conflict": {
diff --git a/js/id/ui/full_screen.js b/js/id/ui/full_screen.js
index e5a01352d..ae7f79177 100644
--- a/js/id/ui/full_screen.js
+++ b/js/id/ui/full_screen.js
@@ -1,39 +1,58 @@
 iD.ui.FullScreen = function(context) {
-    var history = context.history(),
-        key = iD.ui.cmd('⌘S');
+    var element = context.container().node(),
+        key = iD.ui.cmd('⌃f11');
 
-    function saving() {
+    /*function saving() {
         return context.mode().id === 'save';
+    }*/
+
+    function getFullScreenFn() {
+        var prefixes = ['moz', 'webkit', 'ms'];
+        if (element.requestFullscreen)
+            return element.requestFullscreen;
+
+        for (var i = 0; i < prefixes.length; i++) {
+            var fn = element[prefixes[i] + 'RequestFullScreen'];
+            if (fn)
+                return fn;
+        }
+    }
+
+    function is_supported() {
+        return !!getFullScreenFn();
     }
 
     function fullScreen() {
         d3.event.preventDefault();
-        context.container().node().webkitRequestFullscreen();
+        getFullScreenFn().apply(element);
     }
 
     return function(selection) {
-        /*var tooltip = bootstrap.tooltip()
+        if (!is_supported())
+            return;
+
+        var tooltip = bootstrap.tooltip()
             .placement('bottom')
             .html(true)
-            .title(iD.ui.tooltipHtml(t('save.no_changes'), key));*/
+            .title(iD.ui.tooltipHtml(t('full_screen.tooltip'), key));
 
         var button = selection.append('button')
             .attr('class', 'save col12')
             .attr('tabindex', -1)
             .on('click', fullScreen)
-            /*.call(tooltip)*/;
+            .call(tooltip);
 
         button.append('span')
             .attr('class', 'label')
             .text(t('full_screen.title'));
 
-        /*var keybinding = d3.keybinding('undo-redo')
-            .on(key, save, true);*/
+        var keybinding = d3.keybinding('full-screen')
+            .on(key, fullScreen, true);
 
-        /*d3.select(document)
-            .call(keybinding);*/
+        d3.select(document)
+            .call(keybinding);
 
-        var numChanges = 0;
+        /*var numChanges = 0;
 
         context.history().on('change.save', function() {
             var _ = history.difference().summary().length;
@@ -50,11 +69,11 @@ iD.ui.FullScreen = function(context) {
 
             button.select('span.count')
                 .text(numChanges);
-        });
+        });*/
 
-        context.on('enter.save', function() {
+        /*context.on('enter.save', function() {
             button.property('disabled', saving());
             if (saving()) button.call(tooltip.hide);
-        });
+        });*/
     };
 };

From 1a3c75da2b33bc7f962edfb4201e12be7820da6a Mon Sep 17 00:00:00 2001
From: Paul Annekov <paul.annekov@gmail.com>
Date: Sat, 11 Jul 2015 20:26:50 +0300
Subject: [PATCH 3/6] Added ability to exit from full screen

---
 js/id/ui/full_screen.js | 76 +++++++++++++++++------------------------
 1 file changed, 31 insertions(+), 45 deletions(-)

diff --git a/js/id/ui/full_screen.js b/js/id/ui/full_screen.js
index ae7f79177..6d51f8702 100644
--- a/js/id/ui/full_screen.js
+++ b/js/id/ui/full_screen.js
@@ -1,30 +1,46 @@
 iD.ui.FullScreen = function(context) {
-    var element = context.container().node(),
-        key = iD.ui.cmd('⌃f11');
-
-    /*function saving() {
-        return context.mode().id === 'save';
-    }*/
+    var element = context.container().node();
 
     function getFullScreenFn() {
-        var prefixes = ['moz', 'webkit', 'ms'];
-        if (element.requestFullscreen)
+        if (element.requestFullscreen) {
             return element.requestFullscreen;
-
-        for (var i = 0; i < prefixes.length; i++) {
-            var fn = element[prefixes[i] + 'RequestFullScreen'];
-            if (fn)
-                return fn;
+        } else if (element.msRequestFullscreen) {
+            return  element.msRequestFullscreen;
+        } else if (element.mozRequestFullScreen) {
+            return  element.mozRequestFullScreen;
+        } else if (element.webkitRequestFullscreen) {
+            return element.webkitRequestFullscreen;
         }
     }
 
+    function getExitFullScreenFn() {
+        if (document.exitFullscreen) {
+            return document.exitFullscreen;
+        } else if (document.msExitFullscreen) {
+            return  document.msExitFullscreen;
+        } else if (document.mozCancelFullScreen) {
+            return  document.mozCancelFullScreen;
+        } else if (document.webkitExitFullscreen) {
+            return document.webkitExitFullscreen;
+        }
+    }
+
+    function isFullScreen() {
+        return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement
+            || document.msFullscreenElement;
+    }
+
     function is_supported() {
         return !!getFullScreenFn();
     }
 
     function fullScreen() {
         d3.event.preventDefault();
-        getFullScreenFn().apply(element);
+        if (!isFullScreen()) {
+            getFullScreenFn().apply(element);
+        } else {
+            getExitFullScreenFn().apply(document);
+        }
     }
 
     return function(selection) {
@@ -34,7 +50,7 @@ iD.ui.FullScreen = function(context) {
         var tooltip = bootstrap.tooltip()
             .placement('bottom')
             .html(true)
-            .title(iD.ui.tooltipHtml(t('full_screen.tooltip'), key));
+            .title(iD.ui.tooltipHtml(t('full_screen.tooltip')));
 
         var button = selection.append('button')
             .attr('class', 'save col12')
@@ -45,35 +61,5 @@ iD.ui.FullScreen = function(context) {
         button.append('span')
             .attr('class', 'label')
             .text(t('full_screen.title'));
-
-        var keybinding = d3.keybinding('full-screen')
-            .on(key, fullScreen, true);
-
-        d3.select(document)
-            .call(keybinding);
-
-        /*var numChanges = 0;
-
-        context.history().on('change.save', function() {
-            var _ = history.difference().summary().length;
-            if (_ === numChanges)
-                return;
-            numChanges = _;
-
-            tooltip.title(iD.ui.tooltipHtml(t(numChanges > 0 ?
-                    'save.help' : 'save.no_changes'), key));
-
-            button
-                .classed('disabled', numChanges === 0)
-                .classed('has-count', numChanges > 0);
-
-            button.select('span.count')
-                .text(numChanges);
-        });*/
-
-        /*context.on('enter.save', function() {
-            button.property('disabled', saving());
-            if (saving()) button.call(tooltip.hide);
-        });*/
     };
 };

From 8a933a5fa54e6b46690b0ffbd47b1b2a2e200aeb Mon Sep 17 00:00:00 2001
From: Paul Annekov <paul.annekov@gmail.com>
Date: Sat, 11 Jul 2015 20:42:46 +0300
Subject: [PATCH 4/6] Moved the button, updated text

---
 css/app.css             | 9 ++++++++-
 dist/locales/en.json    | 4 ++--
 js/id/ui.js             | 8 ++++----
 js/id/ui/full_screen.js | 2 +-
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/css/app.css b/css/app.css
index 08d939ccd..e093d234b 100644
--- a/css/app.css
+++ b/css/app.css
@@ -63,13 +63,20 @@ body {
     position: absolute;
     height: 40px;
     width: 40px;
-    right: 10px;
+    right: 50px;
     top: 10px;
     border-radius: 4px;
     margin-right: 10px;
     background: black;
 }
 
+.full-screen {
+    position: absolute;
+    width: 40px;
+    right: 10px;
+    top: 10px;
+}
+
 div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4, h5, p, img {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
diff --git a/dist/locales/en.json b/dist/locales/en.json
index f264d0416..340077464 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -431,8 +431,8 @@
         }
     },
     "full_screen": {
-        "title": "Full Screen",
-        "tooltip": "Go to Full Screen mode"
+        "title": "FS",
+        "tooltip": "Toggle Full Screen mode"
     },
     "merge_remote_changes": {
         "conflict": {
diff --git a/js/id/ui.js b/js/id/ui.js
index 59f4f02d8..4d4f80780 100644
--- a/js/id/ui.js
+++ b/js/id/ui.js
@@ -60,14 +60,14 @@ iD.ui = function(context) {
             .attr('class', 'button-wrap col1')
             .call(iD.ui.Save(context));
 
-        limiter.append('div')
-          .attr('class', 'button-wrap col1')
-          .call(iD.ui.FullScreen(context));
-
         bar.append('div')
             .attr('class', 'spinner')
             .call(iD.ui.Spinner(context));
 
+        bar.append('div')
+            .attr('class', 'full-screen')
+            .call(iD.ui.FullScreen(context));
+
         var controls = bar.append('div')
             .attr('class', 'map-controls');
 
diff --git a/js/id/ui/full_screen.js b/js/id/ui/full_screen.js
index 6d51f8702..90fa798be 100644
--- a/js/id/ui/full_screen.js
+++ b/js/id/ui/full_screen.js
@@ -48,7 +48,7 @@ iD.ui.FullScreen = function(context) {
             return;
 
         var tooltip = bootstrap.tooltip()
-            .placement('bottom')
+            .placement('left')
             .html(true)
             .title(iD.ui.tooltipHtml(t('full_screen.tooltip')));
 

From fb1af6afe3e45cc93a7655fb3bbb5d81231e1dc3 Mon Sep 17 00:00:00 2001
From: Paul Annekov <paul.annekov@gmail.com>
Date: Wed, 22 Jul 2015 00:14:48 +0300
Subject: [PATCH 5/6] Added icons, changed button style.

---
 css/app.css                     | 21 ++++++++++-
 dist/img/fullscreen_exit.svg    | 64 +++++++++++++++++++++++++++++++++
 dist/img/fullscreen_request.svg | 64 +++++++++++++++++++++++++++++++++
 dist/locales/en.json            |  3 +-
 js/id/ui/full_screen.js         | 17 ++++-----
 5 files changed, 156 insertions(+), 13 deletions(-)
 create mode 100644 dist/img/fullscreen_exit.svg
 create mode 100644 dist/img/fullscreen_request.svg

diff --git a/css/app.css b/css/app.css
index e093d234b..01134f272 100644
--- a/css/app.css
+++ b/css/app.css
@@ -70,13 +70,32 @@ body {
     background: black;
 }
 
-.full-screen {
+div.full-screen {
     position: absolute;
     width: 40px;
     right: 10px;
     top: 10px;
 }
 
+button.full-screen {
+    width: 100%;
+    position: relative;
+}
+
+button.full-screen, button.full-screen.active {
+    width: 40px;
+    height: 40px;
+    background: transparent url(img/fullscreen_request.svg) no-repeat center;
+}
+
+button.full-screen.active {
+    background-image: url(img/fullscreen_exit.svg);
+}
+
+button.full-screen:hover, button.full-screen:focus {
+    background-color: rgba(0, 0, 0, .8);
+}
+
 div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4, h5, p, img {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
diff --git a/dist/img/fullscreen_exit.svg b/dist/img/fullscreen_exit.svg
new file mode 100644
index 000000000..8608ceb52
--- /dev/null
+++ b/dist/img/fullscreen_exit.svg
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="16"
+   version="1.1"
+   viewBox="0 0 16 16"
+   width="16"
+   xml:space="preserve"
+   id="svg2"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="fullscreen_exit.svg"><metadata
+     id="metadata20"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs18" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1149"
+     id="namedview16"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="7.375"
+     inkscape:cx="-14.983051"
+     inkscape:cy="8"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" /><g
+     id="Layer_1"
+     transform="scale(0.5,0.5)"
+     style="fill:#ffffff" /><g
+     id="fullscreen_x5F_exit_x5F_alt"
+     transform="scale(0.5,0.5)"
+     style="fill:#ffffff"><g
+       id="g6"
+       style="fill:#ffffff"><polygon
+         points="28,20 20,20 20,28 22.586,25.414 29.172,32 32,29.172 25.414,22.586 "
+         style="fill:#ffffff"
+         id="polygon8" /><polygon
+         points="9.375,6.543 2.828,0 0,2.828 6.547,9.371 4,12 11.961,11.957 12,4 "
+         style="fill:#ffffff"
+         id="polygon10" /><polygon
+         points="12,20 4,20 6.586,22.586 0,29.172 2.828,32 9.414,25.414 12,28 "
+         style="fill:#ffffff"
+         id="polygon12" /><polygon
+         points="22.598,6.566 20,3.971 20,12 28.031,12 25.438,9.404 32,2.838 29.164,0 "
+         style="fill:#ffffff"
+         id="polygon14" /></g></g></svg>
\ No newline at end of file
diff --git a/dist/img/fullscreen_request.svg b/dist/img/fullscreen_request.svg
new file mode 100644
index 000000000..fbdc9874c
--- /dev/null
+++ b/dist/img/fullscreen_request.svg
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="16"
+   version="1.1"
+   viewBox="0 0 16 16"
+   width="16"
+   xml:space="preserve"
+   id="svg2"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="fullscreen_request.svg"><metadata
+     id="metadata20"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs18" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1149"
+     id="namedview16"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="7.375"
+     inkscape:cx="-14.983051"
+     inkscape:cy="8"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" /><g
+     id="Layer_1"
+     transform="scale(0.5,0.5)"
+     style="fill:#ffffff" /><g
+     id="fullscreen_x5F_alt"
+     transform="scale(0.5,0.5)"
+     style="fill:#ffffff"><g
+       id="g6"
+       style="fill:#ffffff"><polygon
+         points="24,32 32,32 32,24 29.414,26.586 22.828,20 20,22.828 26.586,29.414 "
+         style="fill:#ffffff"
+         id="polygon8" /><polygon
+         points="8,0 0,0 0,8 2.586,5.414 9.172,12 12,9.172 5.414,2.586 "
+         style="fill:#ffffff"
+         id="polygon10" /><polygon
+         points="32,8 32,0 24,0 26.586,2.586 20,9.172 22.828,12 29.414,5.414 "
+         style="fill:#ffffff"
+         id="polygon12" /><polygon
+         points="0,32 8,32 5.414,29.414 12,22.828 9.172,20 2.586,26.586 0,24 "
+         style="fill:#ffffff"
+         id="polygon14" /></g></g></svg>
\ No newline at end of file
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 340077464..6eefaada4 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -431,8 +431,7 @@
         }
     },
     "full_screen": {
-        "title": "FS",
-        "tooltip": "Toggle Full Screen mode"
+        "tooltip": "Toggle Full Screen"
     },
     "merge_remote_changes": {
         "conflict": {
diff --git a/js/id/ui/full_screen.js b/js/id/ui/full_screen.js
index 90fa798be..e2fec1347 100644
--- a/js/id/ui/full_screen.js
+++ b/js/id/ui/full_screen.js
@@ -1,5 +1,5 @@
 iD.ui.FullScreen = function(context) {
-    var element = context.container().node();
+    var element = context.container().node(), button;
 
     function getFullScreenFn() {
         if (element.requestFullscreen) {
@@ -37,8 +37,10 @@ iD.ui.FullScreen = function(context) {
     function fullScreen() {
         d3.event.preventDefault();
         if (!isFullScreen()) {
+            button.classed('active', true);
             getFullScreenFn().apply(element);
         } else {
+            button.classed('active', false);
             getExitFullScreenFn().apply(document);
         }
     }
@@ -48,18 +50,13 @@ iD.ui.FullScreen = function(context) {
             return;
 
         var tooltip = bootstrap.tooltip()
-            .placement('left')
-            .html(true)
-            .title(iD.ui.tooltipHtml(t('full_screen.tooltip')));
+            .placement('left');
 
-        var button = selection.append('button')
-            .attr('class', 'save col12')
+        button = selection.append('button')
+            .attr('class', 'full-screen')
+            .attr('title', t('full_screen.tooltip'))
             .attr('tabindex', -1)
             .on('click', fullScreen)
             .call(tooltip);
-
-        button.append('span')
-            .attr('class', 'label')
-            .text(t('full_screen.title'));
     };
 };

From 739876de99c1bb1fbb00f71faba728342df85e03 Mon Sep 17 00:00:00 2001
From: Paul Annekov <paul.annekov@gmail.com>
Date: Thu, 23 Jul 2015 22:30:14 +0300
Subject: [PATCH 6/6] Images to sprite, fixed tooltip position, fixed spinner
 position if fullscreen is not supported

---
 css/app.css                     | 54 +++++++++++-----------
 dist/img/fullscreen_exit.svg    | 64 --------------------------
 dist/img/fullscreen_request.svg | 64 --------------------------
 dist/img/sprite.svg             | 80 ++++++++++++++++++++++++++++++---
 dist/locales/en.json            |  4 +-
 js/id/ui.js                     |  8 ++--
 js/id/ui/full_screen.js         | 10 +++--
 7 files changed, 110 insertions(+), 174 deletions(-)
 delete mode 100644 dist/img/fullscreen_exit.svg
 delete mode 100644 dist/img/fullscreen_request.svg

diff --git a/css/app.css b/css/app.css
index 01134f272..ec6daa726 100644
--- a/css/app.css
+++ b/css/app.css
@@ -57,45 +57,17 @@ body {
 
 .spinner {
     opacity: .5;
+    float: right;
 }
 
 .spinner img {
-    position: absolute;
     height: 40px;
     width: 40px;
-    right: 50px;
-    top: 10px;
     border-radius: 4px;
     margin-right: 10px;
     background: black;
 }
 
-div.full-screen {
-    position: absolute;
-    width: 40px;
-    right: 10px;
-    top: 10px;
-}
-
-button.full-screen {
-    width: 100%;
-    position: relative;
-}
-
-button.full-screen, button.full-screen.active {
-    width: 40px;
-    height: 40px;
-    background: transparent url(img/fullscreen_request.svg) no-repeat center;
-}
-
-button.full-screen.active {
-    background-image: url(img/fullscreen_exit.svg);
-}
-
-button.full-screen:hover, button.full-screen:focus {
-    background-color: rgba(0, 0, 0, .8);
-}
-
 div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4, h5, p, img {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -580,6 +552,9 @@ button.save.has-count .count::before {
 .icon.back.blue        { background-position: -420px -20px;}
 .icon.forward.blue     { background-position: -440px -20px;}
 
+.icon.full-screen              { background-position: -620px -20px;}
+.active .icon.full-screen      { background-position: -640px -20px;}
+
 button[disabled] .icon.alert      { background-position:   0 -40px;}
 button[disabled] .icon.add-point  { background-position: -20px -40px;}
 button[disabled] .icon.add-line   { background-position: -40px -40px;}
@@ -1765,6 +1740,27 @@ img.wiki-image {
     background: rgba(0,0,0,.8);
 }
 
+/* Fullscreen button */
+div.full-screen {
+    float: right;
+    width: 40px;
+    margin-right: 10px;
+}
+
+div.full-screen .tooltip {
+    min-width: 160px;
+}
+
+div.full-screen > button, div.full-screen > button.active {
+    width: 40px;
+    height: 40px;
+    background: transparent;
+}
+
+div.full-screen > button:hover {
+    background-color: rgba(0, 0, 0, .8);
+}
+
 /* Map Controls */
 
 .map-controls {
diff --git a/dist/img/fullscreen_exit.svg b/dist/img/fullscreen_exit.svg
deleted file mode 100644
index 8608ceb52..000000000
--- a/dist/img/fullscreen_exit.svg
+++ /dev/null
@@ -1,64 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="16"
-   version="1.1"
-   viewBox="0 0 16 16"
-   width="16"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.48.4 r9939"
-   sodipodi:docname="fullscreen_exit.svg"><metadata
-     id="metadata20"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs18" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1149"
-     id="namedview16"
-     showgrid="false"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     inkscape:zoom="7.375"
-     inkscape:cx="-14.983051"
-     inkscape:cy="8"
-     inkscape:window-x="0"
-     inkscape:window-y="27"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><g
-     id="Layer_1"
-     transform="scale(0.5,0.5)"
-     style="fill:#ffffff" /><g
-     id="fullscreen_x5F_exit_x5F_alt"
-     transform="scale(0.5,0.5)"
-     style="fill:#ffffff"><g
-       id="g6"
-       style="fill:#ffffff"><polygon
-         points="28,20 20,20 20,28 22.586,25.414 29.172,32 32,29.172 25.414,22.586 "
-         style="fill:#ffffff"
-         id="polygon8" /><polygon
-         points="9.375,6.543 2.828,0 0,2.828 6.547,9.371 4,12 11.961,11.957 12,4 "
-         style="fill:#ffffff"
-         id="polygon10" /><polygon
-         points="12,20 4,20 6.586,22.586 0,29.172 2.828,32 9.414,25.414 12,28 "
-         style="fill:#ffffff"
-         id="polygon12" /><polygon
-         points="22.598,6.566 20,3.971 20,12 28.031,12 25.438,9.404 32,2.838 29.164,0 "
-         style="fill:#ffffff"
-         id="polygon14" /></g></g></svg>
\ No newline at end of file
diff --git a/dist/img/fullscreen_request.svg b/dist/img/fullscreen_request.svg
deleted file mode 100644
index fbdc9874c..000000000
--- a/dist/img/fullscreen_request.svg
+++ /dev/null
@@ -1,64 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="16"
-   version="1.1"
-   viewBox="0 0 16 16"
-   width="16"
-   xml:space="preserve"
-   id="svg2"
-   inkscape:version="0.48.4 r9939"
-   sodipodi:docname="fullscreen_request.svg"><metadata
-     id="metadata20"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs18" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1149"
-     id="namedview16"
-     showgrid="false"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     inkscape:zoom="7.375"
-     inkscape:cx="-14.983051"
-     inkscape:cy="8"
-     inkscape:window-x="0"
-     inkscape:window-y="27"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" /><g
-     id="Layer_1"
-     transform="scale(0.5,0.5)"
-     style="fill:#ffffff" /><g
-     id="fullscreen_x5F_alt"
-     transform="scale(0.5,0.5)"
-     style="fill:#ffffff"><g
-       id="g6"
-       style="fill:#ffffff"><polygon
-         points="24,32 32,32 32,24 29.414,26.586 22.828,20 20,22.828 26.586,29.414 "
-         style="fill:#ffffff"
-         id="polygon8" /><polygon
-         points="8,0 0,0 0,8 2.586,5.414 9.172,12 12,9.172 5.414,2.586 "
-         style="fill:#ffffff"
-         id="polygon10" /><polygon
-         points="32,8 32,0 24,0 26.586,2.586 20,9.172 22.828,12 29.414,5.414 "
-         style="fill:#ffffff"
-         id="polygon12" /><polygon
-         points="0,32 8,32 5.414,29.414 12,22.828 9.172,20 2.586,26.586 0,24 "
-         style="fill:#ffffff"
-         id="polygon14" /></g></g></svg>
\ No newline at end of file
diff --git a/dist/img/sprite.svg b/dist/img/sprite.svg
index b47a50a64..7aec0cc11 100644
--- a/dist/img/sprite.svg
+++ b/dist/img/sprite.svg
@@ -13,7 +13,7 @@
    width="800"
    height="560"
    id="svg12393"
-   inkscape:version="0.48.5 r10040"
+   inkscape:version="0.48.4 r9939"
    sodipodi:docname="sprite.svg">
   <sodipodi:namedview
      pagecolor="#ffffff"
@@ -28,11 +28,11 @@
      inkscape:window-height="856"
      id="namedview392"
      showgrid="true"
-     inkscape:zoom="1"
-     inkscape:cx="475.13394"
-     inkscape:cy="495.7147"
-     inkscape:window-x="276"
-     inkscape:window-y="71"
+     inkscape:zoom="16"
+     inkscape:cx="641.185"
+     inkscape:cy="531.10386"
+     inkscape:window-x="285"
+     inkscape:window-y="196"
      inkscape:window-maximized="0"
      inkscape:current-layer="svg12393"
      showguides="true"
@@ -2106,4 +2106,72 @@
      style="color:#000000;fill:#8cd05f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
      inkscape:connector-curvature="0"
      sodipodi:nodetypes="cccccccccccccccccsscsscssccscccccccccccccccccccccccccccssssssssssssssscccccccccsccsssssssssssssss" />
+  <g
+     id="g3387"
+     transform="translate(642.0625,21.9785)"
+     style="fill:#ffffff">
+    <g
+       style="fill:#ffffff"
+       transform="scale(0.5,0.5)"
+       id="Layer_1" />
+    <g
+       style="fill:#ffffff"
+       transform="scale(0.5,0.5)"
+       id="fullscreen_x5F_exit_x5F_alt">
+      <g
+         style="fill:#ffffff"
+         id="g6">
+        <polygon
+           id="polygon8"
+           style="fill:#ffffff"
+           points="25.414,22.586 28,20 20,20 20,28 22.586,25.414 29.172,32 32,29.172 " />
+        <polygon
+           id="polygon10"
+           style="fill:#ffffff"
+           points="12,4 9.375,6.543 2.828,0 0,2.828 6.547,9.371 4,12 11.961,11.957 " />
+        <polygon
+           id="polygon12"
+           style="fill:#ffffff"
+           points="12,28 12,20 4,20 6.586,22.586 0,29.172 2.828,32 9.414,25.414 " />
+        <polygon
+           id="polygon14"
+           style="fill:#ffffff"
+           points="29.164,0 22.598,6.566 20,3.971 20,12 28.031,12 25.438,9.404 32,2.838 " />
+      </g>
+    </g>
+  </g>
+  <g
+     id="g3407"
+     transform="translate(622.082,22.043)"
+     style="fill:#ffffff">
+    <g
+       style="fill:#ffffff"
+       transform="scale(0.5,0.5)"
+       id="Layer_1-1" />
+    <g
+       style="fill:#ffffff"
+       transform="scale(0.5,0.5)"
+       id="fullscreen_x5F_alt">
+      <g
+         style="fill:#ffffff"
+         id="g6-8">
+        <polygon
+           id="polygon8-1"
+           style="fill:#ffffff"
+           points="20,22.828 26.586,29.414 24,32 32,32 32,24 29.414,26.586 22.828,20 " />
+        <polygon
+           id="polygon10-6"
+           style="fill:#ffffff"
+           points="12,9.172 5.414,2.586 8,0 0,0 0,8 2.586,5.414 9.172,12 " />
+        <polygon
+           id="polygon12-0"
+           style="fill:#ffffff"
+           points="22.828,12 29.414,5.414 32,8 32,0 24,0 26.586,2.586 20,9.172 " />
+        <polygon
+           id="polygon14-3"
+           style="fill:#ffffff"
+           points="2.586,26.586 0,24 0,32 8,32 5.414,29.414 12,22.828 9.172,20 " />
+      </g>
+    </g>
+  </g>
 </svg>
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 6eefaada4..d237cf54a 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -430,9 +430,7 @@
             "help": "Another user changed some of the same map features you changed.\nClick on each item below for more details about the conflict, and choose whether to keep\nyour changes or the other user's changes.\n"
         }
     },
-    "full_screen": {
-        "tooltip": "Toggle Full Screen"
-    },
+    "full_screen": "Toggle Fullscreen",
     "merge_remote_changes": {
         "conflict": {
             "deleted": "This object has been deleted by {user}.",
diff --git a/js/id/ui.js b/js/id/ui.js
index 4d4f80780..1fb7d0a2a 100644
--- a/js/id/ui.js
+++ b/js/id/ui.js
@@ -60,14 +60,14 @@ iD.ui = function(context) {
             .attr('class', 'button-wrap col1')
             .call(iD.ui.Save(context));
 
-        bar.append('div')
-            .attr('class', 'spinner')
-            .call(iD.ui.Spinner(context));
-
         bar.append('div')
             .attr('class', 'full-screen')
             .call(iD.ui.FullScreen(context));
 
+        bar.append('div')
+            .attr('class', 'spinner')
+            .call(iD.ui.Spinner(context));
+
         var controls = bar.append('div')
             .attr('class', 'map-controls');
 
diff --git a/js/id/ui/full_screen.js b/js/id/ui/full_screen.js
index e2fec1347..1e00f63b2 100644
--- a/js/id/ui/full_screen.js
+++ b/js/id/ui/full_screen.js
@@ -26,8 +26,8 @@ iD.ui.FullScreen = function(context) {
     }
 
     function isFullScreen() {
-        return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement
-            || document.msFullscreenElement;
+        return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement ||
+            document.msFullscreenElement;
     }
 
     function is_supported() {
@@ -53,10 +53,12 @@ iD.ui.FullScreen = function(context) {
             .placement('left');
 
         button = selection.append('button')
-            .attr('class', 'full-screen')
-            .attr('title', t('full_screen.tooltip'))
+            .attr('title', t('full_screen'))
             .attr('tabindex', -1)
             .on('click', fullScreen)
             .call(tooltip);
+
+        button.append('span')
+            .attr('class', 'icon full-screen');
     };
 };