From e975e9d2d8d805295f501ab4054f5dc4c5544680 Mon Sep 17 00:00:00 2001
From: James Campos <james.r.campos@gmail.com>
Date: Mon, 20 Jun 2011 11:11:59 -0700
Subject: [PATCH] tweak firstrun

---
 4chan_x.user.js |  9 ++++-----
 script.coffee   | 13 +++++++++----
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/4chan_x.user.js b/4chan_x.user.js
index 7fa80898e..012c75e85 100644
--- a/4chan_x.user.js
+++ b/4chan_x.user.js
@@ -2484,17 +2484,16 @@
   };
   firstRun = {
     init: function() {
-      var css, dialog, style;
-      css = "      #navtopr, #navbotr {        position: relative;      }      #navtopr::before {        content: '';        height: 50px;        width: 100px;        background: red;        -webkit-transform: rotate(-45deg);        -moz-transform: rotate(-45deg);        -o-transform: rotate(-45deg);        -webkit-transform-origin: 100% 200%;        -moz-transform-origin: 100% 200%;        -o-transform-origin: 100% 200%;        position: absolute;        top: 100%;        right: 100%;        z-index: 999;      }      #navtopr::after {        content: '';        border-top: 100px solid red;        border-left: 100px solid transparent;        position: absolute;        top: 100%;        right: 100%;        z-index: 999;      }      #navbotr::before {        content: '';        height: 50px;        width: 100px;        background: red;        -webkit-transform: rotate(45deg);        -moz-transform: rotate(45deg);        -o-transform: rotate(45deg);        -webkit-transform-origin: 100% -100%;        -moz-transform-origin: 100% -100%;        -o-transform-origin: 100% -100%;        position: absolute;        bottom: 100%;        right: 100%;        z-index: 999;      }      #navbotr::after {        content: '';        border-bottom: 100px solid red;        border-left: 100px solid transparent;        position: absolute;        bottom: 100%;        right: 100%;        z-index: 999;      }    ";
-      style = $.addStyle(css);
+      var dialog, style;
+      style = $.addStyle("      #navtopr, #navbotr {        position: relative;      }      #navtopr::before {        content: '';        height: 50px;        width: 100px;        background: red;        -webkit-transform: rotate(-45deg);        -moz-transform: rotate(-45deg);        -o-transform: rotate(-45deg);        -webkit-transform-origin: 100% 200%;        -moz-transform-origin: 100% 200%;        -o-transform-origin: 100% 200%;        position: absolute;        top: 100%;        right: 100%;        z-index: 999;      }      #navtopr::after {        content: '';        border-top: 100px solid red;        border-left: 100px solid transparent;        position: absolute;        top: 100%;        right: 100%;        z-index: 999;      }      #navbotr::before {        content: '';        height: 50px;        width: 100px;        background: red;        -webkit-transform: rotate(45deg);        -moz-transform: rotate(45deg);        -o-transform: rotate(45deg);        -webkit-transform-origin: 100% -100%;        -moz-transform-origin: 100% -100%;        -o-transform-origin: 100% -100%;        position: absolute;        bottom: 100%;        right: 100%;        z-index: 999;      }      #navbotr::after {        content: '';        border-bottom: 100px solid red;        border-left: 100px solid transparent;        position: absolute;        bottom: 100%;        right: 100%;        z-index: 999;      }    ");
       style.className = 'firstrun';
       dialog = $.el('div', {
         id: 'overlay',
         className: 'firstrun',
-        innerHTML: "<div id=options><div class='reply dialog'>Click the <strong>4chan X</strong> links for options.<br>There is one on top of and the other at the bottom of the page.</div></div>"
+        innerHTML: "        <div id=options>          <div class='reply dialog'>            <p>Click the <strong>4chan X</strong> buttons for options.</p>            <p>The buttons are at the top and bottom of the page.</p>          </div>        </div>"
       });
       $.append(d.body, dialog);
-      return $.bind(dialog, 'click', firstRun.close);
+      return $.bind(window, 'click', firstRun.close);
     },
     close: function() {
       $.setValue('firstrun', true);
diff --git a/script.coffee b/script.coffee
index f0b46164c..379c5dbed 100644
--- a/script.coffee
+++ b/script.coffee
@@ -1853,7 +1853,7 @@ imgExpand =
 
 firstRun =
   init: ->
-    css = "
+    style = $.addStyle "
       #navtopr, #navbotr {
         position: relative;
       }
@@ -1908,16 +1908,21 @@ firstRun =
         z-index: 999;
       }
     "
-    style = $.addStyle css
     style.className = 'firstrun'
 
     dialog = $.el 'div',
       id: 'overlay'
       className: 'firstrun'
-      innerHTML: "<div id=options><div class='reply dialog'>Click the <strong>4chan X</strong> links for options.<br>There is one on top of and the other at the bottom of the page.</div></div>"
+      innerHTML: "
+        <div id=options>
+          <div class='reply dialog'>
+            <p>Click the <strong>4chan X</strong> buttons for options.</p>
+            <p>The buttons are at the top and bottom of the page.</p>
+          </div>
+        </div>"
     $.append d.body, dialog
 
-    $.bind dialog, 'click', firstRun.close
+    $.bind window, 'click', firstRun.close
 
   close: ->
     $.setValue 'firstrun', true