Bug 615239 - Add 'Get Help' SUMO link to Start Page [r=vingtetun]

mobile/app/mobile.js

@@ -427,6 +427,7 @@ pref("breakpad.reportURL", "http://crash-stats.mozilla.com/report/index/");
 pref("app.releaseNotesURL", "http://www.mozilla.com/%LOCALE%/mobile/%VERSION%/releasenotes/");
 pref("app.sync.tutorialURL", "https://www.mozilla.com/%LOCALE%/mobile/sync/");
 pref("app.support.baseURL", "http://mobile.support.mozilla.com/");
+pref("app.feedbackURL", "http://input.mozilla.com/feedback/");
 pref("app.privacyURL", "https://www.mozilla.com/%LOCALE%/legal/privacy/firefox/mobile/");
 pref("app.creditsURL", "http://www.mozilla.com/%LOCALE%/mobile/credits/");
 #if MOZ_UPDATE_CHANNEL == beta

mobile/chrome/content/aboutHome.xhtml

@@ -83,8 +83,8 @@
       </div>
     </div>
 
-    <div id="about">
-      <img src="chrome://browser/skin/images/mozilla-32.png"/> <a href="http://www.firefox.com/m/feedback/">&aboutHome.giveFeedback;</a>
+    <div id="footer-wrapper">
+      <span id="feedback" style="width: &aboutHome.footerWidth;" class="section-row" onclick="openLink(this);" role="button">&aboutHome.giveFeedback;</span><span id="support" style="width: &aboutHome.footerWidth;" class="section-row" onclick="openLink(this);" role="button">&aboutHome.getHelp;</span>
     </div>
   </div>
 
@@ -99,6 +99,28 @@
     let Ci = Components.interfaces, Cc = Components.classes, Cu = Components.utils;
     let gChromeWin = null;
 
+    let links = [
+      {id: "support", pref: "app.support.baseURL"},
+      {id: "feedback", pref: "app.feedbackURL"}
+    ];
+
+    function setupLinks() {
+      try {
+        let formatter = Cc["@mozilla.org/toolkit/URLFormatterService;1"].getService(Ci.nsIURLFormatter);
+        links.forEach(function(link) {
+          let element = document.getElementById(link.id);
+          if (element) {
+            let url = formatter.formatURLPref(link.pref);
+            element.setAttribute("href", url);
+          }
+        });
+      } catch (ex) {}
+    }
+
+    function openLink(aElement) {
+      openTabs([aElement.getAttribute("href")]);
+    }
+
     function getChromeWin() {
       if (!gChromeWin) {
         gChromeWin = window
@@ -114,6 +136,7 @@
     }
 
     function init() {
+      setupLinks();
       initTabs();
       initAddons();
     }

mobile/locales/en-US/chrome/aboutHome.dtd

@@ -3,6 +3,8 @@
 <!ENTITY aboutHome.remoteTabs                   "Tabs from your other computers">
 <!ENTITY aboutHome.recommendedAddons2           "Add-ons for your &brandShortName;">
 <!ENTITY aboutHome.giveFeedback                 "Give Feedback">
+<!ENTITY aboutHome.getHelp                      "Get Help">
+<!ENTITY aboutHome.footerWidth                  "10em">
 <!ENTITY aboutHome.openAllTabs                  "Open all in tabs">
 <!ENTITY aboutHome.noTabs                       "No tabs from last time">
 <!ENTITY aboutHome.noAddons                     "No recommended add-ons">

mobile/themes/core/aboutHome.css

@@ -57,12 +57,12 @@ html {
   font-weight: bold;
   color: white;
   background: transparent -moz-linear-gradient(top, rgba(57,89,117,1) 0%, rgba(30,66,98,1) 50%, rgba(24,54,82,1) 90%);
-  -moz-border-radius: 6px;
+  border-radius: 6px;
   padding: 12px;
   padding-bottom: 14px;
   margin-bottom: 12px;
   margin-top: 20px;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.2) 0 -3px 0px, rgba(0, 0, 0, 0.1) 0px 2px 0px;
+  box-shadow: inset rgba(0, 0, 0, 0.2) 0 -3px 0px, rgba(0, 0, 0, 0.1) 0px 2px 0px;
 }
 
 #header-suffix {
@@ -73,9 +73,9 @@ html {
   background-color: white;
   padding: 0;
   margin-bottom: 8px;
-  -moz-border-radius: 8px;
+  border-radius: 8px;
   border: 1px solid rgba(0,0,0,0.3);
-  -moz-box-shadow: 
+  box-shadow: 
     inset rgba(255, 255, 255, 0.5) 0 1px 0px,
     inset rgba(0, 0, 0, 0.1) 0 -3px 0px,
     rgba(0, 0, 0, 0.1) 0px 2px 0px;
@@ -90,7 +90,7 @@ html {
   background: transparent -moz-linear-gradient(top, rgba(235,235,235,0.2) 0%, rgba(235,235,235,1) 90%);
   margin: 0;
   padding: 4px 12px 8px 12px;
-  -moz-border-radius: 8px 8px 0 0;
+  border-radius: 8px 8px 0 0;
 }
 
 .section-box > div {
@@ -173,9 +173,9 @@ body[dir="rtl"] #newAddons > div:not(.loading) {
   background: transparent -moz-linear-gradient(top, rgba(235,235,235,0.2) 0%, rgba(235,235,235,1) 90%);
   padding: 8px;
   padding-bottom: 12px;
-  -moz-border-radius: 8px;
+  border-radius: 8px;
   border: 1px solid rgba(0,0,0,0.3);
-  -moz-box-shadow: 
+  box-shadow: 
     inset rgba(255, 255, 255, 0.5) 0 1px 0px,
     inset rgba(0, 0, 0, 0.1) 0 -3px 0px,
     rgba(0, 0, 0, 0.1) 0px 2px 0px;
@@ -212,13 +212,23 @@ body[dir="rtl"] {
   text-align: center;
 }
 
-#about {
+#footer-wrapper {
   font-size: 18px;
-  text-align: center;
   margin-top: 24px;
+  text-align: center;
 }
 
-#about > img {
-  vertical-align: middle;
-  margin: 4px;
+#feedback {
+  display: inline-block;
+  padding: 8px;
+  margin: 0;
+  border-radius: 8px 0 0 8px;
+}
+
+#support {
+  display: inline-block;
+  padding: 8px;
+  margin: 0;
+  border-left: none;
+  border-radius: 0 8px 8px 0;
 }