Bug 551785 - Mobile: new firstrun page [r=vingtetun]

--HG-- rename : mobile/chrome/content/firstRunAnimation.gif => mobile/chrome/content/firstrun/animation.gif rename : mobile/chrome/content/firstrun.xhtml => mobile/chrome/content/firstrun/firstrun.xhtml
2024-10-18 07:45:30 +00:00 · 2010-03-26 21:05:15 -04:00 · 2010-03-26 21:05:15 -04:00 · fd2d6c7bef
commit fd2d6c7bef
parent b5dd6b20c4
13 changed files with 238 additions and 89 deletions
--- a/mobile/branding/nightly/content/logoWordmark.png
+++ b/mobile/branding/nightly/content/logoWordmark.png
--- a/mobile/branding/official/content/logoWordmark.png
+++ b/mobile/branding/official/content/logoWordmark.png
--- a/mobile/chrome/content/firstrun/animation.gif
+++ b/mobile/chrome/content/firstrun/animation.gif
--- a/mobile/chrome/content/firstrun/facebook.png
+++ b/mobile/chrome/content/firstrun/facebook.png
--- a/mobile/chrome/content/firstrun/features.png
+++ b/mobile/chrome/content/firstrun/features.png
--- a/mobile/chrome/content/firstrun/firstrun.xhtml
+++ b/mobile/chrome/content/firstrun/firstrun.xhtml
@ -50,13 +50,14 @@
   - the terms of any one of the MPL, the GPL or the LGPL.
   -
   - ***** END LICENSE BLOCK ***** -->
-
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-  <title>&welcome.title;</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
+  <title>&firstrun.title;</title>
  <link rel="icon" type="image/png" href="chrome://branding/content/favicon32.png" />
-  <link rel="stylesheet" href="chrome://browser/skin/header.css" type="text/css"/>
  <link rel="stylesheet" href="chrome://browser/skin/firstRun.css" type="text/css"/>
+
  <script><![CDATA[
    var Ci = Components.interfaces, Cc = Components.classes;
    function reloadIfDone(aImg) {
@ -71,49 +72,59 @@
        imgIContainer.startAnimation();
      }
    }
-    function goToAddons(aSearchString) {
-      var chromeWin = window
-                         .QueryInterface(Ci.nsIInterfaceRequestor)
-                         .getInterface(Ci.nsIWebNavigation)
-                         .QueryInterface(Ci.nsIDocShellTreeItem)
-                         .rootTreeItem
-                         .QueryInterface(Ci.nsIInterfaceRequestor)
-                         .getInterface(Ci.nsIDOMWindow)
-                         .QueryInterface(Ci.nsIDOMChromeWindow);
-      var BrowserUI = chromeWin.BrowserUI;
-      BrowserUI.showPanel("addons-container");
-      if (aSearchString) {
-        // ExtensionsView initialization is delayed, so need to delay triggering
-        // the search as well
-        setTimeout(function () {
-          // do the search
-          chromeWin.ExtensionsView.doSearch(aSearchString);
-        }, 0);
-      }
-    }
  ]]></script>
 </head>

-<body dir="&locale.dir;">
+<body id="firstrun" class="">
  <div id="wrapper">
-    <div class="intro">
-      <img id="welcomeImage" src="chrome://branding/content/logoWordmark.png"/>
-      <img id="welcomeAnim" onclick="reloadIfDone(this);" src="chrome://browser/content/firstRunAnimation.gif"/>
-    </div>
-    <p id="overview" class="title">&intro.description;</p>
-
-    <div class="go" id="weave">
-      <p class="title">&weave.title;</p>
-      <p>&weave.description;</p>
-      <img src="chrome://browser/skin/images/weave.png"/>
-      <p class="rightalign"><input type="button" id="sync" onclick="goToAddons('weave');" value="&weave.linkLabel;"/></p>
+    <div id="header">
+      <a href="http://mozilla.com/m"><img src="chrome://browser/content/firstrun/mozilla.png" width="64" height="17"/></a>
    </div>
  
-    <div class="go" id="addons">
-      <p class="title">&getPersonal.title;</p>
-      <p>&getPersonal.description;</p>
-      <img src="chrome://browser/skin/images/addons.png"/>
-      <p class="rightalign"><input type="button" id="getPersonal" onclick="goToAddons();" value="&getPersonal.linkLabel;"/></p>
+    <div id="head">
+      <h1><img src="chrome://branding/content/logoWordmark.png"/></h1>
+      <p>&firstrun.heading;</p>
+    </div>
+  
+    <div id="content">
+      <h2>&firstrun.recommended;</h2>
+    
+      <ul id="recommended">
+        <li id="weave"><a href="https://addons.mozilla.org/mobile/addon/10868"><b>&firstrun.weave.title;</b> <span>&firstrun.weave.description;</span></a></li>
+        <li id="starter"><a href="https://addons.mozilla.org/firefox/collection/mobilestarterkit"><b>&firstrun.starter.title;</b> <span>&firstrun.starter.description;</span></a></li>
+        <li id="tour"><a href="#demo" id="show-demo"><b>&firstrun.tour.title;</b> <span>&firstrun.tour.description;</span></a></li>
+      </ul>
+
+      <p id="features"><a href="http://mozilla.com/m/features">&firstrun.features;</a></p>
+
+      <p id="demo" style="display: none">
+        <img id="animation" src="" onclick="reloadIfDone(this);"/>
+      </p>
+    
+      <script>
+        var preload = new Image();
+        preload.src = "chrome://browser/content/firstrun/animation.gif";
+    
+        document.getElementById("show-demo").addEventListener("click", function() {
+          document.getElementById("demo").style.display = "block";
+          document.getElementById("animation").setAttribute("src", preload.src);
+        }, false);
+      </script>
+    </div>
+  
+    <div id="footer">
+      <ul class="nav">
+        <li><a href="http://mozilla.com/m/faq">&firstrun.faq;</a></li>
+        <li><a href="http://mozilla.com/m/privacy">&firstrun.privacy;</a></li>
+      </ul>
+  
+      <div id="follow">
+        <p>&firstrun.follow;</p>
+        <ul>
+          <li id="follow-twitter"><a href="http://twitter.com/mozmobile"><img src="chrome://browser/content/firstrun/twitter.png" height="41" width="42" /></a></li>
+          <li id="follow-facebook"><a href="http://www.facebook.com/firefoxformobile"><img src="chrome://browser/content/firstrun/facebook.png" height="41" width="42" /></a></li>
+        </ul>
+      </div>
    </div>  
  </div>
 </body>
--- a/mobile/chrome/content/firstrun/mozilla.png
+++ b/mobile/chrome/content/firstrun/mozilla.png
--- a/mobile/chrome/content/firstrun/nav-arrow.png
+++ b/mobile/chrome/content/firstrun/nav-arrow.png
--- a/mobile/chrome/content/firstrun/twitter.png
+++ b/mobile/chrome/content/firstrun/twitter.png
--- a/mobile/chrome/jar.mn
+++ b/mobile/chrome/jar.mn
@ -2,6 +2,14 @@

 chrome.jar:
 % content browser %content/
+  content/firstrun/firstrun.xhtml      (content/firstrun/firstrun.xhtml)
+  content/firstrun/animation.gif       (content/firstrun/animation.gif)
+  content/firstrun/mozilla.png         (content/firstrun/mozilla.png)
+  content/firstrun/features.png        (content/firstrun/features.png)
+  content/firstrun/twitter.png         (content/firstrun/twitter.png)
+  content/firstrun/facebook.png        (content/firstrun/facebook.png)
+  content/firstrun/nav-arrow.png       (content/firstrun/nav-arrow.png)
+
 * content/about.xhtml                  (content/about.xhtml)
  content/config.xul                   (content/config.xul)
  content/config.js                    (content/config.js)
@ -14,8 +22,6 @@ chrome.jar:
 * content/browser-ui.js                (content/browser-ui.js)
  content/commandUtil.js               (content/commandUtil.js)
  content/bindings.xml                 (content/bindings.xml)
-  content/firstrun.xhtml               (content/firstrun.xhtml)
-  content/firstRunAnimation.gif        (content/firstRunAnimation.gif)
  content/tabs.xml                     (content/tabs.xml)
  content/bindings/checkbox.xml        (content/bindings/checkbox.xml)
  content/notification.xml             (content/notification.xml)
--- a/mobile/components/AboutRedirector.js
+++ b/mobile/components/AboutRedirector.js
@ -49,7 +49,7 @@ let modules = {
  get firefox() this.fennec,

  firstrun: {
-    uri: "chrome://browser/content/firstrun.xhtml",
+    uri: "chrome://browser/content/firstrun/firstrun.xhtml",
    privileged: true
  },
  rights: {
--- a/mobile/locales/en-US/chrome/firstrun.dtd
+++ b/mobile/locales/en-US/chrome/firstrun.dtd
@ -1,8 +1,13 @@
-<!ENTITY welcome.title                      "Welcome to &brandShortName;">
-<!ENTITY intro.description                  "Synchronize your PC and mobile with Weave Sync. Customize with add-ons. Surf with the Awesome Bar and much, much, much more.">
-<!ENTITY weave.title                        "Get Up and Go">
-<!ENTITY weave.description                  "Get Weave Sync to help break in your Firefox. Share your browsing history, bookmarks, saved passwords and tabs between your PC and mobile.">
-<!ENTITY weave.linkLabel                    "Get the Weave Sync add-on">
-<!ENTITY getPersonal.title                  "Get Personal">
-<!ENTITY getPersonal.description            "Make &brandShortName; your own. Customize the first ever browser to offer add-ons for mobile.">
-<!ENTITY getPersonal.linkLabel              "Get add-ons for your mobile">
+<!ENTITY firstrun.title                "Welcome to &brandShortName;">
+<!ENTITY firstrun.heading              "To help get you started, here are some of the most popular features and add-ons to help you get the most out of &brandShortName;.">
+<!ENTITY firstrun.recommended          "Recommended:">
+<!ENTITY firstrun.weave.title          "Get Weave Sync">
+<!ENTITY firstrun.weave.description    "Share your &brandShortName; history, passwords, bookmarks &amp; tabs between your desktop &amp; mobile">
+<!ENTITY firstrun.starter.title        "Get the Starter Kit Collection">
+<!ENTITY firstrun.starter.description  "Install these recommended add-ons to enhance your &brandShortName; experience">
+<!ENTITY firstrun.tour.title           "Take a Tour">
+<!ENTITY firstrun.tour.description     "Watch this clip to familiarize yourself with how to get around and locate cool features">
+<!ENTITY firstrun.features             "See More Features">
+<!ENTITY firstrun.faq                  "FAQ">
+<!ENTITY firstrun.privacy              "Privacy Policy">
+<!ENTITY firstrun.follow               "Follow us on:">
--- a/mobile/themes/hildon/firstRun.css
+++ b/mobile/themes/hildon/firstRun.css
@ -35,55 +35,182 @@
 *
 * ***** END LICENSE BLOCK ***** */

+html {
+  font-family: "Nokia Sans", Tahoma, sans-serif !important;
+  background: #fff;
+}
+
 body {
-  color: #4b4742;
  font-size: 16px;
+  color: #444;
+  border-top: 4px solid #1e4262;
 }

-.intro {
-  padding-top: 10px;
+h1 {
+  font-size: 19px;
+  margin: 0 0 10px;
 }

-p {
-  padding: 0;
-  padding-bottom: 5px;
+a {
+  color: #0489b7;
+  text-decoration: none;
+}
+
+img {
+  border: none;
+}
+
+#wrapper {
+    width: 96%;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+#header {
+    text-align: right;
+    height: 30px;
+    padding: 0;
+    margin: 0 0 20px;
+}
+
+#header a {
+  display: inline-block;
+  padding: 4px 6px 2px 6px;
+  background: #1e4262;
+ -moz-border-radius-bottomright: 4px;
+ -moz-border-radius-bottomleft: 4px;
+}
+
+#footer {
+  border-top: 2px solid #e7e7e7;
+  padding: 10px;
+  color: #999;
+  clear: both;
+  margin-top: 10px;
+}
+
+#footer ul {
  margin: 0;
-}
-
-p.title {
-  font-size: 19px;
-}
-
-p.rightalign {
-  text-align: right;
-  padding-bottom: 0;
-}
-
-input[type="button"] {
-  font-size: 19px;
-  margin-bottom: 20px;
-}
-
-.go {
-  position: relative;
-  padding-left: 100px;
-}
-
-.go > img {
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-
-#welcomeImage {
+  padding: 0;
  float: left;
 }

-#welcomeAnim {
-  float: right;
+#footer.nav li {
+  list-style: none;
+  float: left;
+  margin: 0 1em 0 0;
+  padding-right: 1em;
+  border-right: 1px solid #e7e7e7;
 }

-#overview {
-  padding-bottom: 30px;
-  clear: both;
+#footer.nav li:last-child {
+  border: 0;
+}
+
+#footer #follow {
+  float: right;
+  padding-bottom: 10px
+}
+
+#footer #follow p {
+  display: inline;
+}
+
+#footer #follow ul {
+  display: inline;
+  float: none;
+}
+
+#footer #follow ul li {
+  display: inline;
+  list-style-type: none;
+  margin-left: 10px;
+}
+
+#footer #follow img {
+  vertical-align: top;
+}
+
+#firstrun #header {
+  margin-bottom: 0;
+}
+
+#firstrun #head h1 {
+  float: left;
+  margin: 0;
+}
+
+#firstrun #head p {
+  margin: 0 0 10px 245px;
+  padding-top: 18px;
+}
+
+#firstrun ul#recommended {
+  margin: 0;
+  padding: 0;
+}
+
+#firstrun ul#recommended li {
+  float: left;
+  width: 32%;
+  list-style-type: none;
+  margin-right: 2%;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+#firstrun ul#recommended li:last-child {
+  margin-right: 0;
+}
+
+#firstrun ul#recommended li a {
+  display: block;
+  padding: 20px 0;
+  -moz-border-radius: 10px;
+  background: #d8ecf1;
+}
+
+#firstrun ul#recommended li a:active {
+  text-decoration: none;
+  background: #b5d7e0;
+}
+
+#firstrun ul#recommended li b {
+  display: block;
+  padding: 90px 10px 0 10px;
+  background-repeat: no-repeat;
+  background-image: url("chrome://browser/content/firstrun/features.png");
+}
+
+#firstrun ul#recommended li span {
+  display: block;
+  padding: 0 10px;
+}
+
+#firstrun ul#recommended li#weave b {
+  background-position: 50% 0;
+}
+
+#firstrun ul#recommended li#starter b {
+  background-position: 50% -150px;
+}
+
+#firstrun ul#recommended li#tour b {
+  background-position: 50% -300px;
+}
+
+#firstrun #features {
+  clear: both;
+  text-align: center;
+}
+
+#firstrun #features a {
+  display: inline-block;
+  padding: 5px 35px 5px 0;
+  background: url("chrome://browser/content/firstrun/nav-arrow.png") right center no-repeat;
+  font-size: 16px;
+}
+
+#firstrun #demo {
+  text-align: center;
 }