Allow feedback on browser identification

backend/index.php

@@ -146,6 +146,23 @@
 
 			break;
 
+		case 'feedback':	
+			$payload = json_decode($_REQUEST['payload']);
+
+			if (!$readonly) {
+				mysql_query('
+					UPDATE
+						results
+					SET 
+						status = -1,
+						comments = "' . mysql_real_escape_string($payload->value) . '"
+					WHERE
+						uniqueid = "' . mysql_real_escape_string($payload->uniqueid) . '"
+				');
+			}
+
+			break;
+
 		case 'confirm':	
 			$payload = json_decode($_REQUEST['payload']);
 

css/main.css

@@ -1231,7 +1231,73 @@ body.indexVisible > div#index button#indexbutton {
 
 /********************************************
  *
- *   Your Browser: Share
+ *   Your Browser: Feedback
+ */
+
+.popupPanel.feedback {
+	width: 210px;
+	margin-top: 10px;
+	margin-left: -130px;
+	padding: 10px 10px 10px;
+
+	text-align: left;
+	color: #000;
+	cursor: auto;
+	font-size: 1.1em;
+}
+.popupPanel.feedback h3 {
+	margin: 0;
+}
+
+.popupPanel.feedback textarea {
+	width: 100%;
+	height: 160px;
+	padding: 10px;
+	margin: 10px 0;
+
+	font-size: 1em;
+
+	border: none;
+	background: #eee;
+}
+.popupPanel.feedback button {
+	width: 100%;
+	border: none;
+	background: #33af33; 
+
+	text-align: left;
+	font-size: 1em;
+	color: #fff;
+	padding: 10px;
+
+	cursor: pointer;
+}
+.popupPanel.feedback button span {
+	font-family: html5test;
+	font-size: 1.2em;
+	margin-right: 4px;
+}
+/*
+.popupPanel.save a {
+	color: #0092bf;
+	font-family: "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
+	font-weight: bold;
+	text-decoration: none;
+}
+.popupPanel.save a:hover {
+	text-decoration: underline;
+}
+.popupPanel.save p {
+	margin-bottom: 1em;
+}
+.popupPanel.save code {
+	font-size: 1.5em;
+}
+*/
+
+/********************************************
+ *
+ *   Your Browser: Save
  */
 
 .popupPanel.save {
@@ -1356,15 +1422,15 @@ body.indexVisible > div#index button#indexbutton {
 	padding: 10px;
 }
 
-.useragent span {
+.useragent > span {
 	position: absolute;
 	right: 10px;
 	top: 8px;
 	font-size: 0.85em;
 	color: #aaa;
 	line-height: 20px;
 }
-.useragent span a {
+.useragent > span a {
 	font-family: html5test;
 	font-weight: normal;
 	font-size: 1.6em;
@@ -1377,10 +1443,10 @@ body.indexVisible > div#index button#indexbutton {
 	-o-transition: all .3s ease-in-out;
 	transition: all .3s ease-in-out;
 }
-.useragent span a.correct:hover {
+.useragent > span a.correct:hover {
 	color: #1c8c1d;
 }
-.useragent span a.wrong:hover {
+.useragent > span a.wrong:hover {
 	color: #853333;
 }
 

index.html

@@ -279,8 +279,10 @@ <h3>Help us improve HTML5 test by donating</h3>
 
 					/* Show box for confirming useragent detection */
 					new Confirm(container, {
+						id:			r.uniqueid,
 						onConfirm:	function() { submit('confirm', '{"uniqueid": "' + r.uniqueid + '"}'); },
-						onReport:	function() { submit('report', '{"uniqueid": "' + r.uniqueid + '"}'); }
+						onReport:	function() { submit('report', '{"uniqueid": "' + r.uniqueid + '"}'); },
+						onFeedback:	function(value) { submit('feedback', JSON.stringify({ uniqueid: r.uniqueid, value: value })); }
 					});
 
 					/* Show action buttons */

scripts/base.js

@@ -203,8 +203,6 @@
 	var Confirm = function() { this.initialize.apply(this, arguments) };
 	Confirm.prototype = {
 		initialize: function(parent, options) {
-			var that = this;
-
 			this.options = options;
 
 			this.useragent = document.createElement('p');
@@ -217,21 +215,13 @@
 			this.useragent.appendChild(this.confirm);
 
 			var correct = document.createElement('a');
-			if (correct.addEventListener) {
-				correct.addEventListener('click', function() { that.confirmUseragent.call(that); }, true);
-			} else {
-				correct.attachEvent('onclick', function() { that.confirmUseragent.call(that); });
-			}
+			correct.addEventListener('click', function() { this.confirmUseragent(); }.bind(this), true);
 			correct.className = 'correct';
 			correct.innerHTML = '✔';
 			this.confirm.appendChild(correct);
 
 			var wrong = document.createElement('a');
-			if (correct.addEventListener) {
-				wrong.addEventListener('click', function() { that.reportUseragent.call(that); }, true);
-			} else {
-				wrong.attachEvent('onclick', function() { that.reportUseragent.call(that); });
-			}
+			wrong.addEventListener('click', function(e) { e.stopPropagation(); this.reportUseragent(); }.bind(this), true);
 			wrong.className = 'wrong';
 			wrong.innerHTML = '✘';
 			this.confirm.appendChild(wrong);
@@ -249,17 +239,27 @@
 
 		reportUseragent: function() {
 			this.options.onReport();
-			this.showThanks();
+
+			new Feedback(this.confirm, {
+				suggestion:	t('I am using') + ' ' + Browsers,
+
+				onFeedback:	function(value) {
+								this.options.onFeedback(value);
+							}.bind(this),
+
+				onClose:	function() {
+								this.showThanks();
+							}.bind(this)
+			});
 		},
 
 		showThanks: function() {
 			this.confirm.style.display = 'none';
 			this.thanks.style.display = 'inline';
 
-			var that = this;
 			window.setTimeout(function() {
-				that.thanks.style.display = 'none';
-			}, 2500);
+				this.thanks.style.display = 'none';
+			}.bind(this), 2500);
 		}
 	}
 
@@ -408,6 +408,66 @@
 
 
 
+	var Feedback = function() { this.initialize.apply(this, arguments) };
+	Feedback.prototype = {
+		initialize: function(parent, options) {
+			var that = this;
+
+			this.parent = parent;
+			this.options = options;
+
+			this.popup = document.createElement('div');
+			this.popup.className = 'popupPanel pointsRight feedback';
+			this.popup.style.display = 'none';
+			this.parent.appendChild(this.popup);
+
+			this.popup.addEventListener('click', function(e) { e.stopPropagation() }, false)
+			this.popup.addEventListener('touchstart', function(e) { e.stopPropagation() }, false)
+
+			document.addEventListener('click', this.close.bind(this), false)
+			document.addEventListener('touchstart', this.close.bind(this), false)
+
+			this.create();
+		},
+
+		create: function() {
+			this.created = true;
+
+			this.popup.innerHTML +=
+				"<div id='feedback'>" +
+				"<h3>What is wrong with this identification?</h3>" +
+				"<textarea id='correction'>" + this.options.suggestion + "</textarea>"+
+				"<button id='sendCorrection'><span>✔</span>Send correction</button>" +
+				"</div>";
+
+			this.popup.style.display = 'block';
+
+			var button = document.getElementById('sendCorrection')
+			button.addEventListener('click', this.send.bind(this), false);
+		},
+
+		send: function() {
+			var field = document.getElementById('correction')
+
+			if (this.options.onFeedback) {
+				this.options.onFeedback(field.value);
+			}
+
+			this.close();	
+		},
+
+		close: function(e) {
+			this.popup.style.display = 'none';
+			this.popup.parentNode.removeChild(this.popup);
+
+			if (this.options.onClose) {
+				this.options.onClose();
+			}
+		}
+	}
+
+
+
 	var NO = 0,
 		YES = 1,
 		OLD = 2,