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

mobile/android/chrome/content/aboutFeedback.js

@@ -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;
   }
 

mobile/android/chrome/content/aboutFeedback.xhtml

@@ -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>

mobile/android/locales/en-US/chrome/aboutFeedback.dtd

@@ -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">

mobile/android/themes/core/aboutFeedback.css

@@ -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;
+  }
 }

mobile/android/themes/core/jar.mn

@@ -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)