From 8b780c9f94a2d094b0036b91240b9808ce7b07a5 Mon Sep 17 00:00:00 2001
From: Nicolas Stepien <mayhemydg@gmail.com>
Date: Wed, 18 Jan 2012 21:34:04 +0100
Subject: [PATCH] Sensible visual feedback when hovering over the delete
 button; simpler resetFileInput, fix it for Firefox; moz prefixed box-sizing.

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

diff --git a/4chan_x.user.js b/4chan_x.user.js
index d87da5c2d..10bb62808 100644
--- a/4chan_x.user.js
+++ b/4chan_x.user.js
@@ -1320,11 +1320,7 @@
       if (this.multiple) return qr.resetFileInput();
     },
     resetFileInput: function() {
-      var clone, el;
-      el = $('[type=file]', qr.el);
-      clone = el.cloneNode();
-      $.on(clone, 'change', qr.fileInput);
-      return $.replace(el, clone);
+      return $('[type=file]', qr.el).value = null;
     },
     replies: [],
     reply: (function() {
@@ -1337,7 +1333,7 @@
         this.el = $.el('a', {
           className: 'preview',
           href: 'javascript:;',
-          innerHTML: '<a class=remove title=Remove>x</a><label hidden><input type=checkbox></label><span></span>'
+          innerHTML: '<a class=remove>x</a><label hidden><input type=checkbox></label><span></span>'
         });
         $.on(this.el, 'click', function() {
           return _this.select();
@@ -3116,6 +3112,7 @@ a[href="javascript:;"] {\
   min-width: 300px;\
   overflow: hidden;\
   box-sizing: border-box;\
+  -moz-box-sizing: border-box;\
   padding: 0 2px;\
 }\
 #qr > .move > span {\
@@ -3171,6 +3168,7 @@ a[href="javascript:;"] {\
   background-size: cover;\
   border: 1px solid #666;\
   box-sizing: border-box;\
+  -moz-box-sizing: border-box;\
   display: inline-block;\
   height: 90px; width: 90px;\
   margin: 5px; padding: 2px;\
@@ -3197,6 +3195,9 @@ a[href="javascript:;"] {\
   font-weight: 700;\
   padding: 3px;\
 }\
+.remove:hover::after {\
+  content: " Remove";\
+}\
 #addReply {\
   color: #333;\
   font-size: 3.5em;\
diff --git a/script.coffee b/script.coffee
index 63569378b..70af28c81 100644
--- a/script.coffee
+++ b/script.coffee
@@ -976,10 +976,7 @@ qr =
     $.addClass qr.el, 'dump'
     qr.resetFileInput() if @multiple # reset input
   resetFileInput: ->
-    el    = $ '[type=file]', qr.el
-    clone = el.cloneNode()
-    $.on clone, 'change', qr.fileInput
-    $.replace el, clone
+    $('[type=file]', qr.el).value = null
 
 
   replies: []
@@ -1003,7 +1000,7 @@ qr =
       @el = $.el 'a',
         className: 'preview'
         href: 'javascript:;'
-        innerHTML: '<a class=remove title=Remove>x</a><label hidden><input type=checkbox></label><span></span>'
+        innerHTML: '<a class=remove>x</a><label hidden><input type=checkbox></label><span></span>'
       $.on @el, 'click', => @select()
       $.on $('.remove', @el), 'click', (e) =>
         e.stopPropagation()
@@ -2460,6 +2457,7 @@ a[href="javascript:;"] {
   min-width: 300px;
   overflow: hidden;
   box-sizing: border-box;
+  -moz-box-sizing: border-box;
   padding: 0 2px;
 }
 #qr > .move > span {
@@ -2515,6 +2513,7 @@ a[href="javascript:;"] {
   background-size: cover;
   border: 1px solid #666;
   box-sizing: border-box;
+  -moz-box-sizing: border-box;
   display: inline-block;
   height: 90px; width: 90px;
   margin: 5px; padding: 2px;
@@ -2541,6 +2540,9 @@ a[href="javascript:;"] {
   font-weight: 700;
   padding: 3px;
 }
+.remove:hover::after {
+  content: " Remove";
+}
 #addReply {
   color: #333;
   font-size: 3.5em;