Bug 1007436 - "Revamp visual design of about:feedback". r=margaret.leibovic f=alam

This commit is contained in:
vivek 2014-10-03 12:29:00 +02:00
parent cf69f85ecc
commit 3ca3db7d02
13 changed files with 182 additions and 70 deletions

View File

@ -10,6 +10,15 @@ const FEEDBACK_PRODUCT_STRING = "Firefox for Android";
let Cc = Components.classes;
let Ci = Components.interfaces;
let Cu = Components.utils;
const HEARTY_ICON_MDPI = "chrome://browser/skin/images/icon_heart_mdpi.png";
const HEARTY_ICON_HDPI = "chrome://browser/skin/images/icon_heart_hdpi.png";
const HEARTY_ICON_XHDPI = "chrome://browser/skin/images/icon_heart_xhdpi.png";
const HEARTY_ICON_XXHDPI = "chrome://browser/skin/images/icon_heart_xxhdpi.png";
const FLOATY_ICON_MDPI = "chrome://browser/skin/images/icon_floaty_mdpi.png";
const FLOATY_ICON_HDPI = "chrome://browser/skin/images/icon_floaty_hdpi.png";
const FLOATY_ICON_XHDPI = "chrome://browser/skin/images/icon_floaty_xhdpi.png";
const FLOATY_ICON_XXHDPI = "chrome://browser/skin/images/icon_floaty_xxhdpi.png";
Cu.import("resource://gre/modules/Services.jsm");
Cu.import("resource://gre/modules/Messaging.jsm");
@ -32,6 +41,23 @@ function init() {
switchSection("sad");
}, false);
let helpSectionIcon = FLOATY_ICON_XXHDPI;
let sadThanksIcon = HEARTY_ICON_XXHDPI;
if (window.devicePixelRatio <= 1) {
helpSectionIcon = FLOATY_ICON_MDPI;
sadThanksIcon = HEARTY_ICON_MDPI;
} else if (window.devicePixelRatio <= 1.5) {
helpSectionIcon = FLOATY_ICON_HDPI;
sadThanksIcon = HEARTY_ICON_HDPI;
} else if (window.devicePixelRatio <= 2) {
helpSectionIcon = FLOATY_ICON_XHDPI;
sadThanksIcon = HEARTY_ICON_XHDPI;
}
document.getElementById("sumo-icon").src = helpSectionIcon;
document.getElementById("sad-thanks-icon").src = sadThanksIcon;
window.addEventListener("unload", uninit, false);
document.getElementById("open-play-store").addEventListener("click", openPlayStore, false);
@ -49,7 +75,11 @@ function init() {
// Fill "Last visited site" input with most recent history entry URL.
Services.obs.addObserver(function observer(aSubject, aTopic, aData) {
document.getElementById("last-url").value = aData;
document.getElementById("last-url").value = aData;
// Enable the parent div iff the URL is valid.
if (aData.length != 0) {
document.getElementById("last-url-div").style.display="block";
}
}, "Feedback:LastUrl", false);
Messaging.sendRequest({ type: "Feedback:LastUrl" });
@ -96,24 +126,15 @@ function sendFeedback(aEvent) {
let sectionElement = document.getElementById(section);
let descriptionElement = sectionElement.querySelector(".description");
// Bail if the description value isn't valid. HTML5 form validation will take care
// of showing an error message for us.
if (!descriptionElement.validity.valid)
return;
let data = {};
data["happy"] = false;
data["description"] = descriptionElement.value;
data["product"] = FEEDBACK_PRODUCT_STRING;
let urlCheckBox = document.getElementById("last-checkbox");
let urlElement = document.getElementById("last-url");
// Bail if the URL value isn't valid. HTML5 form validation will take care
// of showing an error message for us.
if (!urlElement.validity.valid)
return;
// Only send a URL string if the user provided one.
if (urlElement.value) {
if (urlCheckBox.checked) {
data["url"] = urlElement.value;
}

View File

@ -43,7 +43,7 @@
<h1 class="header">&happy.header;</h1>
<div class="message-box">
<div class="message">&happy.message;</div>
<div class="fine-print">&happy.finePrint;</div>
<div>&happy.finePrint;</div>
</div>
<div id="open-play-store" class="link-box-bottom">
<div class="stars"/>
@ -56,25 +56,35 @@
</section>
<section id="sad">
<h1 class="header">&sad.header;</h1>
<form>
<div class="message">&sad.message;</div>
<textarea class="description" placeholder="&sad.placeholder;" rows="8" required="true"/>
<div class="message">&sad.lastSite;</div>
<input id="last-url" type="url" placeholder="&sad.urlPlaceholder;"/>
<div class="fine-print">&feedback.privacy;</div>
<textarea class="description" placeholder="&sad.placeholder;" rows="4" required="true"/>
<div class="message" id="last-url-div">
<span>&sad.lastSite2;</span>
<input id="last-checkbox" type="checkbox" checked="checked"/>
<input id="last-url" type="url" placeholder="&sad.urlPlaceholder;" readonly="readonly"/>
</div>
<input class="send-feedback" type="submit" value="&feedback.send;"/>
<div class="privacy">&feedback.privacy2;</div>
</form>
<div id="sumo-message" class="fine-print">&support.pre2;<a id="sumo-link">&support.link;</a>&support.post2;</div>
</section>
<section id="thanks-sad">
<h1 class="header">&sad.thanksHeader;</h1>
<div class="message-box-bottom">
<h1 class="header">&sad.thanksHeader2;</h1>
<img id="sad-thanks-icon" />
<div id="thanks-sad-message">
<div class="message">&sad.thanksMessageTop;</div>
<div class="message">&sad.thanksMessageBottom;</div>
</div>
</section>
<footer>
<div id="help-section">
<img id="sumo-icon" />
<span>&support.pre3;<a id="sumo-link">&support.link2;</a>&support.post3;</span>
</div>
</footer>
<script type="application/javascript;version=1.8" src="chrome://browser/content/aboutFeedback.js"></script>
</body>
</html>

View File

@ -17,9 +17,9 @@
<!-- LOCALIZATION NOTE (support.pre): Include a trailing space as needed. -->
<!-- LOCALIZATION NOTE (support.link): Avoid leading/trailing spaces, this text is a link. -->
<!-- LOCALIZATION NOTE (support.post): Include a starting space as needed. -->
<!ENTITY support.pre2 "You can also visit ">
<!ENTITY support.link "&brandShortName; Support">
<!ENTITY support.post2 " for more information.">
<!ENTITY support.pre3 "Visit our ">
<!ENTITY support.link2 "Support Site">
<!ENTITY support.post3 " to get answers for common issues.">
<!ENTITY happy.header "That's great to hear!">
@ -35,13 +35,14 @@
<!ENTITY happy.maybeLater2 "Maybe later">
<!ENTITY happy.noThanks "No thanks">
<!ENTITY sad.header "Oh no!">
<!ENTITY sad.message "We're sorry that you had some problems with &brandShortName;. Please tell us what happened so that we can fix it.">
<!ENTITY sad.placeholder "Enter your feedback here">
<!ENTITY sad.lastSite "Last visited site (optional)">
<!ENTITY sad.lastSite2 "Include last visited site">
<!-- LOCALIZATION NOTE (sad.urlPlaceholder): Placeholder text that appears in "Last visited site" input box when there is no text. -->
<!ENTITY sad.urlPlaceholder "http://">
<!ENTITY sad.thanksHeader "Thanks for letting us know.">
<!ENTITY sad.thanksHeader2 "Thank you.">
<!-- LOCALIZATION NOTE (sad.thanksMessageTop): "real people" — We're stating that an actual human will look at the feedback
and that it doesn't just go to some automated system that looks for keywords, or something like that. -->
@ -52,5 +53,5 @@
work in your language, you can change it to something like "no matter what" or just remove it entirely. -->
<!ENTITY sad.thanksMessageBottom "Or else.">
<!ENTITY feedback.privacy "For your privacy, please don't include any personally identifiable information in your feedback.">
<!ENTITY feedback.privacy2 "For your privacy, please do not include any personal information in your feedback.">
<!ENTITY feedback.send "Send Feedback">

View File

@ -7,24 +7,40 @@ body {
font-family: sans-serif;
font-size: 12px;
color: #222;
background-color: #ced7de;
padding: 10px;
background-color: #f5f5f5;
margin: 0;
}
a {
color: #004b98;
color: #0092DB;
}
section {
max-width: 500px;
margin-left: auto;
margin-right: auto;
overflow: auto;
height: -moz-calc(100% - 80px);
margin: 20px;
padding: 5px;
}
section:not([active]) {
display: none;
}
footer {
display: none;
width: 100%;
position: fixed;
bottom: 0px;
font-size: 16px;
margin-left: auto;
margin-right: auto;
background-color: #ebe9f0;
border-top: 2px solid #D4D3D8;
}
.header {
font-size: 24px;
font-weight: lighter;
@ -33,21 +49,19 @@ section:not([active]) {
}
.message-box,
.message-box-bottom,
.link-box,
.link-box-bottom {
background-color: #e4e9ee;
background-color: #ffffff;
padding: 15px;
}
.message-box,
.link-box {
border-bottom: 1px solid #c8cdd4;
border-bottom: 1px solid #ebebf0;
}
.message-box-bottom,
.link-box-bottom {
border-bottom: 2px solid #c8cdd4;
border-bottom: 2px solid #ebebf0;
margin-bottom: 10px;
}
@ -63,11 +77,15 @@ section:not([active]) {
.message {
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
.fine-print {
font-size: 10px;
color: #666;
.privacy {
color: #bebebe;
text-align: center;
margin-top: 10px;
padding: 0px 20px;
}
.stars {
@ -78,35 +96,27 @@ section:not([active]) {
background-size: 64px 10px;
background-position: center;
background-repeat: no-repeat;
background-color: #e4e9ee;
}
.link-box-bottom:active > .stars {
background-color: transparent;
}
@media screen and (max-height: 400px) {
.bottom-links,
#sumo-message {
margin-top: 20px;
}
#sumo-icon {
position: relative;
float: left;
margin-right: 20px;
width: 41px;
height: 41px;
}
@media not screen and (max-height: 400px) {
body {
padding-top: 40px;
}
.bottom-links {
position: absolute;
left: 0;
bottom: 40px;
}
#sumo-message {
position: absolute;
bottom: 20px;
}
#sad-thanks-icon {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
width: 60px;
}
.bottom-links {
@ -119,31 +129,93 @@ section:not([active]) {
text-decoration: underline;
}
#sumo-message {
color: #444;
-moz-padding-end: 30px;
}
.description,
#last-url {
.description {
font-family: "Clear Sans",sans-serif;
font-size: 14px;
color: #666;
margin-bottom: 10px;
padding: 5px;
width: -moz-calc(100% - 10px);
border-radius: 4px;
border-width: 1px;
}
#last-url-div {
display: none;
}
#last-url {
color: #bebebe;
width: -moz-calc(100% - 10px);
border: none;
background: transparent;
/*padding: 0px;*/
display: block;
}
#last-checkbox {
position: relative;
float: right;
margin: 0px;
background-image: url("chrome://browser/skin/images/checkbox_unchecked.png");
}
#last-checkbox:checked {
background-image: url("chrome://browser/skin/images/checkbox_checked.png");
border: 1px solid #379DE7;
}
#last-checkbox:not(:checked) ~ #last-url {
visibility: hidden;
}
#help-section {
max-width: 500px;
margin: 14px 20px 15px;
padding: 5px;
overflow: hidden;
}
#thanks-sad-message {
margin: 20px 0px;
}
.send-feedback {
margin-top: 10px;
padding: 10px;
padding: 15px;
font-size: 16px;
width: 100%;
background-image: linear-gradient(rgb(87,94,102), rgb(71,77,83) 90%, rgb(45,49,53));
background-color: #0092DB;
border-radius: 4px;
border-width: 0;
color: #fff;
}
.send-feedback:active {
background-image: linear-gradient(rgb(138,143,148), rgb(127,130,135) 90%, rgb(108,111,114));
#sumo-link {
color: #222;
}
@media screen and (max-height: 400px) {
body {
padding-top: 40px;
}
.bottom-links {
margin-top: 20px;
}
}
@media not screen and (max-height: 400px) {
.bottom-links {
position: absolute;
left: 0;
bottom: 40px;
}
#sad[active="true"] ~ footer {
display: block;
}
#thanks-sad[active="true"] ~ footer {
display: block;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

View File

@ -98,3 +98,11 @@ chrome.jar:
skin/images/reader-style-icon-xhdpi.png (images/reader-style-icon-xhdpi.png)
skin/images/privatebrowsing-mask.png (images/privatebrowsing-mask.png)
skin/images/update.png (images/update.png)
skin/images/icon_floaty_hdpi.png (images/icon_floaty_hdpi.png)
skin/images/icon_floaty_mdpi.png (images/icon_floaty_mdpi.png)
skin/images/icon_floaty_xhdpi.png (images/icon_floaty_xhdpi.png)
skin/images/icon_floaty_xxhdpi.png (images/icon_floaty_xxhdpi.png)
skin/images/icon_heart_hdpi.png (images/icon_heart_hdpi.png)
skin/images/icon_heart_mdpi.png (images/icon_heart_mdpi.png)
skin/images/icon_heart_xhdpi.png (images/icon_heart_xhdpi.png)
skin/images/icon_heart_xxhdpi.png (images/icon_heart_xxhdpi.png)