Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
405 lines (338 sloc) 18.6 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
body {
padding:0;
margin: 0;
background:rgb(245, 245, 245);
font-family: "arial", "lucida grande", "lucida sans unicode", "bitstream vera sans", "dejavu sans", "trebuchet ms", sans-serif;
}
body * {
box-sizing:border-box;
}
p{
margin:10px 5px;
}
form{
border-bottom:1px solid #efefef;
}
ul li, a {
list-style:none;
margin: 0;
font:bold 14px sans-serif;
color:#111;
}
ul li:hover {
color:#fff;
background:rgb(51, 153, 255);
}
ul li:hover a {color:#fff}
ul {
padding:0;
margin:0;
margin-top:10px;
}
a {
text-decoration:none;
padding:6px 0;
}
a:hover {text-decoration:underline}
#page-address{
width:83%;
}
input[type=text], textarea, select, input[type=url] {
border:1px solid #dfdfdf;
padding:3px 4px;
font-family: "arial", "lucida grande", "lucida sans unicode", "bitstream vera sans", "dejavu sans", "trebuchet ms", sans-serif;
}
input[type="text"]:hover, input[type=url]:hover, textarea:hover, select:hover{
border:1px solid rgb(51, 153, 255);
}
input[type="text"]:focus, input[type=url]:focus, textarea:focus,select:focus{
border:1px solid #999;
box-shadow:inset 0 0 3px #999;
}
textarea{
width:100%;
}
input[type="submit"]{
border:0;
padding:4px 10px;
background:-o-linear-gradient(top,rgb(60, 160, 255),rgb(40, 140, 250));
box-shadow:0 0 1px 1px #999;
color:#fff;
font-weight:bolder;
float: right;
margin:0 5px;
}
input[type="submit"]:hover {
cursor:pointer;
background:-o-linear-gradient(top,#54aaff,rgb(40, 140, 250));
}
#opera-version,#opera-build-number,#OS{
float:left;
width:20%;
}
#OS { width:60%} /* make the OS field wider because it is longer than the version and build number*/
#additional-information-details-panel-opener, #link-related-with-the-site li {
cursor: pointer;
letter-spacing:-1pt;
}
#link-related-with-the-site li a{
width:100%;
padding:6px 4px;
display: block;
}
#additional-information-details-panel-opener:hover, #open-comment-panel:hover {text-decoration: underline}
#additional-information-details-panel{
display:none;
}
div.pad_bottom {padding-bottom:10px}
#error {
background:#ffdbdb;
border:1px solid #dd5959;
}
#success {
background:#dbffd6;
border:1px solid #62cc5b;
}
#error, #success {
display:inline-block;
padding:1px 4px 3px 4px;
border-radius:6px/15px;
margin: 5px 0 0 5px;
font:bold 14px sans-serif;
text-shadow:0 1px 0 #fff;
}
#error:before, #success:before {
padding-right:3px;
top:3px;
position:relative;
}
#error:before {content:url(images/errors.png)}
#success:before {content:url(images/success.png)}
label[for^=category] {
width: 29%;
display:inline-block;
color:#444;
font-weight:bold;
background:-o-linear-gradient(top, #fff, #ddd);
border-radius:5px;
box-shadow:0 0 2px #aaa;
padding: 5px;
text-align:center;
margin: 0 2px;
cursor:pointer;
text-shadow:0 1px 1px #fff;
border:1px solid #bbb;
-o-transition:color 800ms ease-in-out;
}
label[for^=category]:hover {
color:#111;
border:1px solid #888;
}
label[for='category-1'] {width: 35%}
input.category {
z-index:-1;
position:absolute;
opacity:0;
margin:40px 0 0 40px;
}
input.category:checked + label {
border:1px solid rgb(51, 153, 255);
}
input#category-1:checked + label {color:#ff7700}
input#category-2:checked + label {color:#ff4120}
input#category-3:checked + label {color:#3344fa}
.category:invalid ~ label {
border:1px solid red;
}
h1 {
margin:0;
padding-left:5px;
padding-bottom: 5px;
font-size:1.6em;
color:#444;
text-shadow: 1px 0 0 #fff, 2px 1px 0 #bbb;
font-weight:100;
border-bottom:1px solid #ccc;
}
body.loading {
background-image: url('images/loading-circle.png');
background-position: 50% 5%;
background-repeat: no-repeat;
padding-top: 85px;
}
form, #login-notice { display: none; }
body.logged_in form { display: block; }
body.login #login-notice { display:block; }
</style>
<title>Fix the Web</title>
</head>
<body class="loading">
<p id="login-notice">
Oops! It looks like you need to <a href="options.html#authenticate" target="_blank">login</a> to report a site problem.
</p>
<form action="" method="post" id="report-site-form">
<h1>Report a Site Problem</h1>
<p id="form-begins">
<label for="page-address" style="font-weight:bold;">Page: </label><input type="url" required="required" id="page-address" name="page_address" placeholder="You must enter page location" />
</p>
<label>Which category best describes the bug?</label>
<p>
<input required="required" type="radio" name="category" id="category-1" value="1" class="category" />
<label for="category-1">Minor Annoyance</label>
<input type="radio" name="category" id="category-2" value="2" class="category" />
<label for="category-2">Major Problem</label>
<input type="radio" name="category" id="category-3" value="3" class="category" />
<label for="category-3">Site Unusable</label>
</p>
<p>
<label for="error-report-description">Error Details:</label>
<textarea rows="5" cols="30" id="error-report-description" required="required" name="description" placeholder="What triggered the problem, what you were expecting, etc"></textarea>
</p>
<div class="pad_bottom"><em id="additional-information-details-panel-opener">Additional details...</em><input type="submit" value="Submit Report &gt;" />
<p id="additional-information-details-panel">
<input type="text" id="OS" name="OS" placeholder="operating system" />
<input type="text" id="opera-version" name="opera_version" placeholder="Opera's version" />
<input type="text" id="opera-build-number" name="opera_build_number" placeholder="Opera's build number" />
<textarea id="additional-information" name="additional_information" cols="35" rows="4" placeholder="Other information about your system and browser, e.g. plugins, extensions, screen size, etc."></textarea>
</p>
</div>
</form>
<ul id="link-related-with-the-site">
<li><a href="#" id="open-comment-panel">View problems reported on this site</a></li>
<li><a href="index.html" target="_blank">View recent bug reports</a></li>
</ul>
<script src="scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/jsOAuth-1.3.3.min.js"></script>
<script type="text/javascript">
// check if the user is authenticated
if ( opera.extension.bgProcess.isLoggedIn() )
$('body').attr('class', 'logged_in')
else
$('body').attr('class', 'login')
window.addEventListener("DOMContentLoaded", function() {
document.getElementById('open-comment-panel').innerText = 'View problems reported on this '
+ (widget.preferences['display-reports-by'] && widget.preferences['display-reports-by'] == 'domain' ? 'site' : 'page')
// get the current tab's URL
var tab = opera.extension.bgProcess.opera.extension.tabs.getFocused();
if (tab) document.getElementById('page-address').value = tab.url;
// when "Vew problems reported on this site" is clicked, open the comments panel
document.getElementById('open-comment-panel').addEventListener("click", function() {
opera.extension.bgProcess.opera.extension.tabs.getFocused().postMessage({
load_comments_frame : true
}); // trigger the comments frame's creation
window.close(); // closes the popup window - doesn't work in developer mode
return false; // keep link from following the default action
}, false);
// function show_message() shows an error or success message above the form
function show_message (text, message_mode) { // message_mode: 'error' or 'success'
var message = document.querySelector('#error, #success'),
first_form_element = document.getElementById('form-begins');
if (message) message.parentNode.removeChild(message); // remove old messages before displaying a new one
var element = document.createElement('div');
element.id = message_mode;
element.innerHTML = text;
first_form_element.parentNode.insertBefore(element, first_form_element);
}
// process the form when it is submitted
document.getElementById('report-site-form').onsubmit = function() {
var error_message = document.getElementById('error');
if (error_message) error_message.parentNode.removeChild(error_message);
var error_form = document.getElementById('report-site-form'),
domain_name = /:\/\/([^\/]+)\/?/.test(error_form.page_address.value) ? error_form.page_address.value.match(/:\/\/([^\/]+)\/?/)[1] : '', // get the second item in the result's array which is the matched text in the parentheses
params = {
mode : 'submit error', // this is to select the correct form handler in ajax_request_handler.php
url : error_form.page_address.value.replace(/#(.*)/, '').replace(/\/$/ig, ''),
domain : domain_name,
category : (document.querySelector('input.category:checked') ? document.querySelector('input.category:checked').value : false),
description : error_form.description.value,
system : error_form.OS.value,
version : error_form.opera_version.value,
build : error_form.opera_build_number.value,
misc : error_form.additional_information.value,
language : 'EN' // TODO change this to the actual language of the extension when localization is implemented
};
if (!params.url.length) show_message ( 'Please paste the current page\'s URL into the page location field.', 'error' );
else if (!(/^(1|2|3)$/).test(params.category)) show_message ( 'Please select a category for the error.', 'error' );
else if (!params.description.length) show_message ( 'Please fill out the error report\'s description field.', 'error' );
else {
// send report asynchronously to the server with the ajax_request_handler.php file on it
// see the "Fix the Web Server Side" repo on Github (http://github.com/cyberstream/Fix-the-Web-Server-Side) for that file
// validate and process the form request in ajax_request_handler.php
$('#report-site-form').fadeTo(600, 0.4);
try {
opera.extension.bgProcess.getUserName(function(data) {
var parsedResponse = data && data.text && data.text != '' && JSON.parse(data.text) ? JSON.parse(data.text) : {}
params.username = parsedResponse.screen_name;
if (!params.username || !params.username.length) show_message ( 'There was an error retrieving your username.', 'error' );
else {
opera.extension.bgProcess.sendRequest('GET', 'ajax_request_handler.php', function(message) {
$('#report-site-form').fadeTo(600, 1);
if (message == 'true') show_message ('Thanks for reporting this bug. It will be reviewed soon.', 'success');
else if (message.length > 0) show_message (message, 'error');
else show_message ('The was a problem submitting your error report. Please try submitting it again.', 'error');
}, params, true);
}
});
} catch (e) {
show_message ('The report could not be posted. Ensure that you are connected to the Internet.', 'error');
}
}
return false; // prevent the form from actually submitting
}
// Toggle additional information panel by clicking the text "Additional information"
document.getElementById("additional-information-details-panel-opener").addEventListener("click",function(){
var state = document.getElementById("additional-information-details-panel").style.display;
switch(state){
// if #additional-information-panel is hidden, it will be indicated
case "block":
document.getElementById("additional-information-details-panel").style.display="none";
break;
// if #additional-information-panel is visible, it will disappear
case "none":
case "":
document.getElementById("additional-information-details-panel").style.display="block";
break;
}
},false);
if ((window.opera) && (opera.buildNumber)){
// learn and write version into hidden element (#opera-version)
document.getElementById("opera-version").value = opera.version();
// learn and write version of Opera into hidden element (#opera-build-number)
document.getElementById("opera-build-number").value = opera.buildNumber();
}
// seperator will split additional information to different parts
var separator = "\r\n===========\r\n";
// cache (#additional-information) element
var bug = document.getElementById('additional-information');
// learn what plugins is installed and write them into hidden element (#additional-information)
bug.value += "PLUGINS:" + separator;
// navigator.plugins stores what plugins is installed and which are activated
if (navigator.plugins) {
for (var i = 0; i < navigator.plugins.length; i++) {
// for each plugin obtain its name, description and file name. Then write them into hidden element (#additional-information)
var plugin = navigator.plugins[i];
bug.value += "* " + plugin.name + " ("+plugin.description+") "+plugin.filename+"\r\n";
}
}
// learn screen resolution write them into hidden element (#additional-information)
bug.value += "\n\nSCREEN:" + separator;
if ((typeof(screen.width) != "undefined") && (screen.width && screen.height))
bug.value += "Resolution: " + screen.width + 'x' + screen.height + "\n";
// learn color depth and write them into hidden element (#additional-information)
if ((typeof(screen.colorDepth) != "undefined") && (screen.colorDepth))
bug.value += "ColorDepth: " + screen.colorDepth + "\r\n";
// platform states whether the system is Win32, 64-bit build, mac or linux
document.getElementById("OS").value = navigator.platform // default system form field value, but it is overwritten if this next thing works....
opera.extension.onmessage = function(e) {
if (e.data && e.data.system) document.getElementById("OS").value = e.data.system // ...if data arrives via messaging from the bgProcess, and it's the system info, then put it into the system field of the form.
}
var system = opera.extension.bgProcess.getOS(); // call the function
},false);
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.