Solved issue #411

activities/Gears.activity/css/activity.css

@@ -31,6 +31,24 @@
   background-image: url(../icons/toolbar-help.svg);
 }
 
+#fullscreen-button {
+	background-image: url(../icons/view-fullscreen.svg);
+}
+
+#unfullscreen-button {
+	background-image: url(../icons/view-return.svg);
+	border: 0;
+	border-radius: 0px;
+	margin: 1px;
+	width: 45px;
+	height: 45px;
+	top: 0;
+	right: 5%;
+	position: absolute;
+	visibility: hidden;
+	z-index: 5;
+}
+
 @media screen and (max-width: 567px) {
 	.toolbar {
 		padding-left: 10px;

activities/Gears.activity/index.html

@@ -28,10 +28,12 @@
       <button class="toolbutton" id="clear-button" title="Clear"></button>
       <button class="toolbutton" id="help-button" title="Help"></button>
       <button class="toolbutton pull-right" id="stop-button" title="Stop"></button>
+      <button class="toolbutton pull-right" id="fullscreen-button" title="Fullscreen"></button>
     </div>
     <div id="canvas">
       <canvas id="gearsketch_canvas"></canvas>
     </div>
+    <button class="toolbutton" id="unfullscreen-button" title="Unfullscreen"></button>
   </body>
 
 </html>

activities/Gears.activity/js/activity.js

@@ -117,6 +117,22 @@ define(["sugar-web/activity/activity","sugar-web/graphics/radiobuttonsgroup","ge
             gearSketch.playDemo();
         });
 
+        // Full screen.
+        document.getElementById("fullscreen-button").addEventListener('click', function() {
+            document.getElementById("main-toolbar").style.opacity = 0;
+            document.getElementById("canvas").style.top = "0px";
+            gearSketch.canvasOffsetY = gearSketch.canvas.getBoundingClientRect().top;
+            gearSketch.updateCanvasSize();
+            document.getElementById("unfullscreen-button").style.visibility = "visible";
+        });
+        document.getElementById("unfullscreen-button").addEventListener('click', function() {
+            document.getElementById("main-toolbar").style.opacity = 1;
+            document.getElementById("canvas").style.top = "55px";
+            gearSketch.canvasOffsetY = gearSketch.canvas.getBoundingClientRect().top;
+            gearSketch.updateCanvasSize();
+            document.getElementById("unfullscreen-button").style.visibility = "hidden";
+        });
+
     });
 
 });