Add button to exit the Zulip tutorial.

Fixes: #872.

[Tweaked by tabbott to fix focus and rename to "Exit tutorial".]

static/js/tutorial.js

@@ -321,8 +321,12 @@ function update_popover_info(popover_func) {
     current_popover_info = popover_func;
 }
 
-function finale() {
+function finale(skip) {
     var finale_modal = $("#tutorial-finale");
+    if (skip) {
+        finale_modal.modal("hide");
+        $(".screen").css({opacity: 0.0, width: 0, height: 0});
+    } else {
         $(".screen").css({opacity: 0.0});
         finale_modal.css("z-index", 20001);
         finale_modal.modal("show");
@@ -331,6 +335,7 @@ function finale() {
             finale_modal.modal("hide");
             $(".screen").css({opacity: 0.0, width: 0, height: 0});
         }).focus();
+    }
 
     // Restore your actual stream colors and rerender to display any
     // messages received during the tutorial.
@@ -430,7 +435,7 @@ function reply() {
 
     $("#tutorial-reply-next").click(function () {
         spotlight_message.popover("destroy");
-        finale();
+        finale(false);
     }).focus();
 }
 
@@ -509,6 +514,10 @@ function welcome() {
         bar.popover("destroy");
         stream();
     }).focus();
+    $("#tutorial-message-skip").click(function () {
+        bar.popover("destroy");
+        finale(true);
+    });
 }
 
 exports.start = function () {

static/styles/zulip.css

@@ -3804,6 +3804,10 @@ form.admin-realm .control-label {
     text-align: right;
 }
 
+.btn-skip {
+    margin-right: 15px;
+}
+
 #share-the-love {
     margin-left: 0px;
     margin-right: 0px;

static/templates/tutorial_message.handlebars

@@ -6,6 +6,9 @@
     {{#tr this}}<p>Messages in __page_params.product_name__ go to a <b>stream</b> and have a <b>topic</b>.</p>{{/tr}}
 
     <div class="tutorial-done-button">
+    <center>
+      <button class="btn btn-skip" type="submit" id="tutorial-message-skip">{{t "Exit Tutorial" }}</button>
       <button class="btn btn-primary" type="submit" id="tutorial-message-next">{{t "Next" }}</button>
+    </center>
     </div>
 </div>