Backed out changeset b5a3e22944f9 (bug 711157)

--HG--
rename : browser/base/content/abouthome/snippet1.png => browser/base/content/aboutHome-snippet1.png
rename : browser/base/content/abouthome/snippet2.png => browser/base/content/aboutHome-snippet2.png
rename : browser/base/content/abouthome/aboutHome.css => browser/base/content/aboutHome.css
rename : browser/base/content/abouthome/aboutHome.js => browser/base/content/aboutHome.js
rename : browser/base/content/abouthome/aboutHome.xhtml => browser/base/content/aboutHome.xhtml

browser/base/content/aboutHome.css

@@ -0,0 +1,384 @@
+%if 0
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License
+ * Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS"
+ * basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is aboutHome.xhtml.
+ *
+ * The Initial Developer of the Original Code is the Mozilla Foundation.
+ * Portions created by the Initial Developer are Copyright (C) 2010
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Marco Bonardo <mak77@bonardo.net> (original author)
+ *   Mihai Sucan <mihai.sucan@gmail.com>
+ *   Stephen Horlander <shorlander@mozilla.com>
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+%endif
+
+html {
+  font-family: sans-serif;
+  background: -moz-Field;
+  color: -moz-FieldText;
+  height: 100%;
+}
+
+body {
+  display: inline-block;
+  position: relative;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+#brandStart {
+  text-align: center;
+  height: 19%;
+  max-height: 256px;
+  min-height: 92px;
+}
+
+#brandStartSpacer {
+  height: 6.5%;
+}
+
+#brandStartLogo {
+  height: 100%;
+}
+
+#searchContainer {
+  height: 15%;
+  min-height: 90px;
+}
+
+#searchContainer::before {
+  content: " ";
+  display: block;
+  height: 23%;
+}
+
+#searchForm {
+  display: table;
+  width: 100%;
+  max-width: 1830px;
+  margin: 0 auto;
+}
+
+@media all and (max-height: 700px) {
+  #searchContainer { height: 20% }
+}
+
+@media all and (max-height: 500px) {
+  #searchContainer { height: 25% }
+}
+
+@media all and (max-height: 370px) {
+  #searchContainer { height: 30% }
+}
+
+#searchLogoContainer {
+  display: table-cell;
+  width: 30%;
+  text-align: end;
+  line-height: 32px;
+}
+
+#searchEngineLogo {
+  -moz-margin-end: 2.5%;
+  vertical-align: middle;
+}
+
+#searchInputContainer {
+  display: table-cell;
+  width: 38%;
+  max-width: 700px;
+  min-width: 150px;
+}
+
+#searchText {
+  width: 100%;
+  height: 24px;
+  padding: 3px 6px;
+  border-radius: 2px;
+  border: 1px solid rgb(150,150,150);
+  border-top-color: rgb(100,100,100);
+  box-shadow: 0 1px 0 rgba(255,255,255,0.5);
+  font-size: 1.2em;
+}
+
+#searchButtons {
+  display: table-cell;
+  width: 31%;
+  -moz-padding-start: 13px;
+  vertical-align: top;
+}
+
+@media all and (max-width: 470px) {
+  #searchLogoContainer { width: 10% }
+  #searchButtons { width: 11% }
+  #searchInputContainer { width: 40% }
+}
+
+@media all and (min-width: 470px) and (max-width: 600px) {
+  #searchLogoContainer { width: 15% }
+  #searchButtons { width: 16%; white-space: nowrap }
+  #searchInputContainer { width: 45% }
+}
+
+@media all and (min-width: 600px) and (max-width: 850px) {
+  #searchLogoContainer { width: 20% }
+  #searchButtons { width: 21%; white-space: nowrap }
+  #searchInputContainer { width: 49% }
+}
+
+#searchSubmit {
+  background: -moz-linear-gradient(#f1f1f1, #dfdfdf);
+  padding: 4px 8px;
+  height: 32px;
+  border: 1px solid #ccc;
+  border-top-color: #ccc;
+  border-bottom-color: #999;
+  -moz-border-start-color: #afafaf;
+  -moz-border-end-color: #999;
+  box-shadow: 1px 1px 0 #e7e7e7,
+              0 1px 0 #fcfcfc inset,
+              0 -1px 0 #d7d7d7 inset;
+  font-size: 1em;
+  color: #000;
+  cursor: pointer;
+}
+
+body[dir=rtl] #searchSubmit {
+  box-shadow: -1px 1px 0 #e7e7e7,
+              0 1px 0 #fcfcfc inset,
+              0 -1px 0 #d7d7d7 inset;
+}
+
+#searchSubmit:active {
+  background: -moz-linear-gradient(#c5c5c5, #c5c5c5);
+  box-shadow: 1px 1px 0 #e7e7e7;
+}
+
+body[dir=rtl] #searchSubmit:active {
+  box-shadow: -1px 1px 0 #e7e7e7;
+}
+
+#contentContainer {
+  height: 30%;
+  background-image: -moz-radial-gradient(center top, ellipse farthest-side, rgba(16,83,130,.5), rgba(16,83,130,0) 75%),
+                    -moz-radial-gradient(center top, ellipse farthest-side, rgba(180,218,244,.5), rgba(180,218,244,0)),
+                    -moz-radial-gradient(center top, ellipse farthest-side, rgba(180,218,244,.3), rgba(180,218,244,0));
+  background-size: 100% 5px,
+                   100% 50px,
+                   100% 100%;
+  background-repeat: no-repeat;
+}
+
+@media all and (max-height: 400px) {
+  #contentContainer { height: 20% }
+}
+
+#snippetContainer {
+  position: relative;
+  top: -24px;
+  text-align: center;
+}
+
+#snippets {
+  display: inline-block;
+  padding: 14px;
+  width: 30%;
+  max-width: 600px;
+  background-image: -moz-linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.1));
+  background-color: rgb(250,250,250);
+  border-radius: 4px;
+  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset,
+              0 -2px 0 rgba(0,0,0,.1) inset,
+              0 0 10px rgba(255,255,255,.5) inset,
+              0 0 0 1px rgba(0,0,0,.1),
+              0 2px 4px rgba(0,0,0,.2);
+  color: rgb(60,60,60);
+  font-size: .85em;
+  cursor: pointer;
+}
+
+#snippets:empty {
+  visibility: hidden;
+}
+
+@media all and (max-width: 470px) {
+  #snippets { width: 65% }
+}
+
+@media all and (min-width: 470px) and (max-width: 850px) {
+  #snippets { width: 45% }
+}
+
+#snippets:hover {
+  background-color: rgb(255,255,255);
+  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset,
+              0 -2px 0 rgba(0,0,0,.1) inset,
+              0 0 10px rgba(255,255,255,.5) inset,
+              0 0 5px rgba(0,0,0,.1),
+              0 0 0 1px rgba(0,0,0,.1),
+              0 2px 4px rgba(0,0,0,.2);
+}
+
+#snippets:hover:active {
+  background-color: rgb(210,210,210);
+  box-shadow: 0 2px 3px rgba(0,0,0,.3) inset,
+              0 1px 0 rgba(255,255,255,.5);
+}
+
+#defaultSnippet1,
+#defaultSnippet2 {
+  display: table-row;
+  text-align: start;
+}
+
+#defaultSnippet1::before,
+#defaultSnippet2::before {
+  display: table-cell;
+  vertical-align: middle;
+  -moz-padding-end: 1em;
+}
+
+#defaultSnippet1::before {
+  content: url("chrome://browser/content/aboutHome-snippet1.png");
+}
+#defaultSnippet2::before {
+  content: url("chrome://browser/content/aboutHome-snippet2.png");
+}
+
+#sessionRestoreContainer {
+  padding-top: 1.5%;
+  text-align: center;
+}
+
+@media all and (max-height: 500px) {
+  #sessionRestoreContainer {
+    position: relative;
+    top: -15px;
+    padding-top: 0;
+  }
+}
+
+#restorePreviousSession {
+  padding: 10px;
+  border: 0;
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px rgba(9,37,59,0),
+              0 1px 2px rgba(9,37,59,0),
+              0 0 10px rgba(255,255,255,0),
+              0 -3px 0 rgba(180,194,212,0) inset;
+  -moz-transition-property: background-color, box-shadow;
+  -moz-transition-duration: 0.25s;
+  -moz-transition-timing-function: ease-out;
+  background: transparent;
+  color: rgb(50,50,50);
+  font-weight: bold;
+  font-size: 1em;
+  cursor: pointer;
+}
+
+#restorePreviousSession::before {
+  display: inline-block;
+  content: url("chrome://browser/content/aboutHome-restore-icon.png");
+  -moz-margin-end: 10px;
+  vertical-align: middle;
+  height: 66px; /* Needed to avoid a blank space under the image */
+}
+
+body[dir=rtl] #restorePreviousSession::before {
+  -moz-transform: scaleX(-1);
+}
+
+@media all and (max-height: 500px) {
+  #restorePreviousSession::before {
+    content: url("chrome://browser/content/aboutHome-restore-icon-small.png");
+    height: 41px;
+  }
+}
+
+@media all and (max-width: 500px) {
+  #restorePreviousSession::before { 
+    content: url("chrome://browser/content/aboutHome-restore-icon-small.png");
+    height: 41px;
+  }
+}
+
+#restorePreviousSession:disabled {
+  display: none;
+}
+
+#restorePreviousSession:hover {
+  background-image: -moz-linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.2));
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px rgba(9,37,59,.2),
+              0 1px 2px rgba(9,37,59,.2),
+              0 0 10px rgba(255,255,255,.4),
+              0 -3px 0 rgba(180,194,212,.3) inset;
+}
+
+#restorePreviousSession:hover:active {
+  background-image: -moz-linear-gradient(rgba(255,255,255,.0), rgba(255,255,255,.2));
+  background-color: rgba(23,75,115,.1);
+  box-shadow: 0 0 0 1px rgba(9,37,59,.2),
+              0 1px 2px rgba(9,37,59,.4) inset,
+              0 1px 5px rgba(9,37,59,.15) inset;
+}
+
+#bottomSection {
+  position: absolute;
+  color: rgb(150,150,150);
+  font-size: .8em;
+  width: 100%;
+  text-align: center;
+  bottom: 2%;
+}
+
+#syncLinksContainer {
+  padding-top: 1em;
+}
+
+.sync-link {
+  padding: 1em;
+}
+
+@media all and (max-height: 370px) {
+  #bottomSection {
+    visibility: hidden;
+  }
+}

browser/base/content/aboutHome.js

@@ -22,7 +22,6 @@
  * Contributor(s):
  *   Marco Bonardo <mak77@bonardo.net> (original author)
  *   Mihai Sucan <mihai.sucan@gmail.com>
- *   Frank Yan <fyan@mozilla.com>
  *
  * Alternatively, the contents of this file may be used under the terms of
  * either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -156,12 +155,6 @@ function onLoad(event)
   document.getElementById("searchText").focus();
 
   loadSnippets();
-
-  fitToWidth();
-  window.addEventListener("resize", fitToWidth);
-  window.addEventListener("unload", function() {
-    window.removeEventListener("resize", fitToWidth);
-  });
 }
 
 
@@ -267,7 +260,7 @@ function showSnippets()
   let defaultSnippetsElt = document.getElementById("defaultSnippets");
   let entries = defaultSnippetsElt.querySelectorAll("span");
   // Choose a random snippet.  Assume there is always at least one.
-  let randIndex = Math.floor(Math.random() * entries.length);
+  let randIndex = Math.round(Math.random() * (entries.length - 1));
   let entry = entries[randIndex];
   // Inject url in the eventual link.
   if (DEFAULT_SNIPPETS_URLS[randIndex]) {
@@ -276,17 +269,27 @@ function showSnippets()
     // up in the translation.
     if (links.length == 1) {
       links[0].href = DEFAULT_SNIPPETS_URLS[randIndex];
+      activateSnippetsButtonClick(entry);
     }
   }
   // Move the default snippet to the snippets element.
   snippetsElt.appendChild(entry);
 }
 
-function fitToWidth() {
+/**
-  if (window.scrollMaxX) {
+ * Searches a single link element in aElt and binds its href to the click
-    document.body.setAttribute("narrow", "true");
+ * action of the snippets button.
-  } else if (document.body.hasAttribute("narrow")) {
+ *
-    document.body.removeAttribute("narrow");
+ * @param aElt
-    fitToWidth();
+ *        Element to search the link into.
+ */
+function activateSnippetsButtonClick(aElt) {
+  let links = aElt.getElementsByTagName("a");
+  if (links.length == 1) {
+    document.getElementById("snippets")
+            .addEventListener("click", function(aEvent) {
+      if (aEvent.target.nodeName != "a")
+        window.location = links[0].href;
+    }, false);
   }
 }

browser/base/content/aboutHome.xhtml

@@ -25,7 +25,6 @@
 #   Marco Bonardo <mak77@bonardo.net> (original author)
 #   Mihai Sucan <mihai.sucan@gmail.com>
 #   Stephen Horlander <shorlander@mozilla.com>
-#   Frank Yan <fyan@mozilla.com>
 #
 # Alternatively, the contents of this file may be used under the terms of
 # either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -61,48 +60,52 @@
     <link rel="icon" type="image/png" id="favicon"
           href="chrome://branding/content/icon16.png"/>
     <link rel="stylesheet" type="text/css" media="all"
-          href="chrome://browser/content/abouthome/aboutHome.css"/>
+          href="chrome://browser/content/aboutHome.css"/>
 
     <script type="text/javascript;version=1.8"
-            src="chrome://browser/content/abouthome/aboutHome.js"/>
+            src="chrome://browser/content/aboutHome.js"/>
   </head>
 
   <body dir="&locale.dir;" onload="onLoad(event)">
-    <div id="container">
+    <div id="brandStartSpacer" />
-      <div class="spacer"/>
+    <div id="brandStart">
-      <div id="topSection">
+      <img id="brandStartLogo" src="chrome://branding/content/about-logo.png" alt="" />
-        <img id="brandLogo" src="chrome://branding/content/about-logo.png" alt=""/>
+    </div>
 
-        <div id="searchContainer">
+    <div id="searchContainer">
-          <form name="searchForm" id="searchForm" onsubmit="onSearchSubmit(event)">
+      <form name="searchForm" id="searchForm" onsubmit="onSearchSubmit(event)">
-            <div id="searchLogoContainer"><img id="searchEngineLogo"/></div>
+        <div id="searchLogoContainer"><img id="searchEngineLogo" /></div>
-            <input type="text" name="q" value="" id="searchText" maxlength="256"/>
+        <div id="searchInputContainer">
-            <input id="searchSubmit" type="submit" value="&abouthome.searchEngineButton.label;"/>
+          <input type="text" name="q" value="" id="searchText" maxlength="256" />
-          </form>
         </div>
-
+        <div id="searchButtons">
-        <div id="snippetContainer">
+          <input id="searchSubmit" type="submit" value="&abouthome.searchEngineButton.label;" />
-          <div id="defaultSnippets" hidden="true">
-            <span id="defaultSnippet1">&abouthome.defaultSnippet1.v1;</span>
-            <span id="defaultSnippet2">&abouthome.defaultSnippet2.v1;</span>
-          </div>
-          <div id="snippets"/>
         </div>
-      </div>
+      </form>
-      <div class="spacer"/>
+    </div>
 
-      <div id="launcher" session="true">
+    <div id="contentContainer">
-        <button class="launchButton" id="bookmarks">&abouthome.bookmarksButton.label;</button>
+      <div id="snippetContainer">
-        <button class="launchButton" id="history">&abouthome.historyButton.label;</button>
+        <div id="defaultSnippets" hidden="true">
-        <button class="launchButton" id="settings">&abouthome.settingsButton.label;</button>
+          <span id="defaultSnippet1">&abouthome.defaultSnippet1.v1;</span>
-        <button class="launchButton" id="addons">&abouthome.addonsButton.label;</button>
+          <span id="defaultSnippet2">&abouthome.defaultSnippet2.v1;</span>
-        <button class="launchButton" id="downloads">&abouthome.downloadsButton.label;</button>
+        </div>
-        <button class="launchButton" id="sync">&syncBrand.shortName.label;</button>
+        <div id="snippets"/>
-        <div id="restorePreviousSessionSeparator"/>
-        <button class="launchButton" id="restorePreviousSession">&historyRestoreLastSession.label;</button>
       </div>
 
-      <a id="aboutMozilla" href="http://www.mozilla.com/about/"/>
+      <div id="sessionRestoreContainer">
+        <button id="restorePreviousSession">&historyRestoreLastSession.label;</button>
+      </div>
+    </div>
+
+    <div id="bottomSection">
+      <div id="aboutMozilla">
+        <a href="http://www.mozilla.com/about/">&abouthome.aboutMozilla;</a>
+      </div>
+      <div id="syncLinksContainer">
+        <a href="javascript:void(0);" class="sync-link" id="setupSyncLink">&abouthome.syncSetup.label;</a>
+        <a href="javascript:void(0);" class="sync-link" id="pairDeviceLink">&abouthome.pairDevice.label;</a>
+      </div>
     </div>
   </body>
 </html>

browser/base/content/abouthome/aboutHome.css

@@ -1,362 +0,0 @@
-%if 0
-/* ***** BEGIN LICENSE BLOCK *****
- * Version: MPL 1.1/GPL 2.0/LGPL 2.1
- *
- * The contents of this file are subject to the Mozilla Public License
- * Version
- * 1.1 (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- * http://www.mozilla.org/MPL/
- *
- * Software distributed under the License is distributed on an "AS IS"
- * basis,
- * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
- * for the specific language governing rights and limitations under the
- * License.
- *
- * The Original Code is aboutHome.xhtml.
- *
- * The Initial Developer of the Original Code is the Mozilla Foundation.
- * Portions created by the Initial Developer are Copyright (C) 2010
- * the Initial Developer. All Rights Reserved.
- *
- * Contributor(s):
- *   Marco Bonardo <mak77@bonardo.net> (original author)
- *   Mihai Sucan <mihai.sucan@gmail.com>
- *   Stephen Horlander <shorlander@mozilla.com>
- *   Frank Yan <fyan@mozilla.com>
- *
- * Alternatively, the contents of this file may be used under the terms of
- * either the GNU General Public License Version 2 or later (the "GPL"), or
- * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
- * in which case the provisions of the GPL or the LGPL are applicable instead
- * of those above. If you wish to allow use of your version of this file only
- * under the terms of either the GPL or the LGPL, and not to allow others to
- * use your version of this file under the terms of the MPL, indicate your
- * decision by deleting the provisions above and replace them with the notice
- * and other provisions required by the GPL or the LGPL. If you do not delete
- * the provisions above, a recipient may use your version of this file under
- * the terms of any one of the MPL, the GPL or the LGPL.
- *
- * ***** END LICENSE BLOCK ***** */
-%endif
-
-html {
-  font: message-box;
-  font-size: 100%;
-  background-color: hsl(0,0%,90%);
-  background-image: url(chrome://browser/content/abouthome/noise.png),
-                    -moz-linear-gradient(hsla(0,0%,100%,.7), hsla(0,0%,100%,.4));
-  background-attachment: fixed;
-  color: -moz-FieldText;
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  height: 100%;
-}
-
-#container {
-  display: -moz-box;
-  -moz-box-orient: vertical;
-  width: 100%;
-  height: 100%;
-}
-
-input,
-button {
-  font-size: inherit;
-  font-family: inherit;
-}
-
-a {
-  color: -moz-nativehyperlinktext;
-  text-decoration: none;
-}
-
-.spacer {
-  -moz-box-flex: 1;
-}
-
-#topSection {
-  text-align: center;
-}
-
-#brandLogo {
-  height: 154px;
-  margin: 22px 0 31px;
-}
-
-#searchForm,
-#snippets {
-  width: 470px;
-}
-
-#searchForm {
-  display: -moz-box;
-  margin: 0 auto;
-}
-
-#searchLogoContainer {
-  display: -moz-box;
-  -moz-box-align: center;
-  padding-top: 2px;
-  -moz-padding-end: 8px;
-}
-
-#searchEngineLogo {
-  display: inline-block;
-}
-
-#searchText {
-  -moz-box-flex: 1;
-  padding: 6px 8px;
-  background: hsla(0,0%,100%,.9) padding-box;
-  border: 1px solid;
-  border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
-  box-shadow: 0 1px 0 hsla(210,65%,9%,.02) inset,
-              0 0 2px hsla(210,65%,9%,.1) inset,
-              0 1px 0 hsla(0,0%,100%,.2);
-  border-radius: 2.5px 0 0 2.5px;
-}
-
-body[dir=rtl] #searchText {
-  border-radius: 0 2.5px 2.5px 0;
-}
-
-#searchText:focus {
-  border-color: hsla(206,100%,60%,.6) hsla(206,76%,52%,.6) hsla(204,100%,40%,.6);
-}
-
-#searchSubmit {
-  -moz-margin-start: -1px;
-  background: -moz-linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.1)) padding-box;
-  padding: 0 9px;
-  border: 1px solid;
-  border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
-  -moz-border-start: 1px solid transparent;
-  border-radius: 0 2.5px 2.5px 0;
-  box-shadow: 0 0 2px hsla(0,0%,100%,.5) inset,
-              0 1px 0 hsla(0,0%,100%,.2);
-  cursor: pointer;
-  -moz-transition-property: background-color, border-color, box-shadow;
-  -moz-transition-duration: 150ms;
-}
-
-body[dir=rtl] #searchSubmit {
-  border-radius: 2.5px 0 0 2.5px;
-}
-
-#searchText:focus + #searchSubmit,
-#searchText + #searchSubmit:hover {
-  border-color: #59b5fc #45a3e7 #3294d5;
-  color: white;
-}
-
-#searchText:focus + #searchSubmit {
-  background-image: -moz-linear-gradient(#4cb1ff, #1793e5);
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
-              0 0 0 1px hsla(0,0%,100%,.1) inset,
-              0 1px 0 hsla(210,54%,20%,.03);
-}
-
-#searchText + #searchSubmit:hover {
-  background-image: -moz-linear-gradient(#66bdff, #0d9eff);
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
-              0 0 0 1px hsla(0,0%,100%,.1) inset,
-              0 1px 0 hsla(210,54%,20%,.03),
-              0 0 4px hsla(206,100%,20%,.2);
-}
-
-#searchText + #searchSubmit:hover:active {
-  box-shadow: 0 1px 1px hsla(211,79%,6%,.1) inset,
-              0 0 1px hsla(211,79%,6%,.2) inset;
-  -moz-transition-duration: 0ms;
-}
-
-#defaultSnippet1,
-#defaultSnippet2 {
-  display: block;
-  min-height: 38px;
-  background: 30px center no-repeat;
-  padding: 6px 0;
-  -moz-padding-start: 79px;
-}
-
-body[dir=rtl] #defaultSnippet1,
-body[dir=rtl] #defaultSnippet2 {
-  background-position: right 30px center;
-}
-
-#defaultSnippet1 {
-  background-image: url("chrome://browser/content/abouthome/snippet1.png");
-}
-
-#defaultSnippet2 {
-  background-image: url("chrome://browser/content/abouthome/snippet2.png");
-}
-
-#snippets {
-  display: inline-block;
-  text-align: start;
-  margin: 12px 0;
-  color: #3c3c3c;
-  font-size: 75%;
-}
-
-#launcher {
-  display: -moz-box;
-  -moz-box-align: center;
-  -moz-box-pack: center;
-  width: 100%;
-  background-color: hsla(0,0%,0%,.03);
-  border-top: 1px solid hsla(0,0%,0%,.03);
-  box-shadow: 0 1px 2px hsla(0,0%,0%,.02) inset,
-              0 -1px 0 hsla(0,0%,100%,.25);
-}
-
-body[narrow] #launcher[session] {
-  display: block; /* display separator and restore button on separate lines */
-  text-align: center;
-  white-space: nowrap; /* prevent navigational buttons from wrapping */
-}
-
-.launchButton {
-  display: -moz-box;
-  -moz-box-orient: vertical;
-  margin: 16px 1px;
-  padding: 14px 6px;
-  min-width: 88px;
-  max-width: 176px;
-  background: transparent padding-box;
-  border: 1px solid transparent;
-  border-radius: 2.5px;
-  color: #525c66;
-  font-size: 75%;
-  cursor: pointer;
-  -moz-transition-property: background-color, border-color, box-shadow;
-  -moz-transition-duration: 150ms;
-}
-
-body[narrow] #launcher[session] > .launchButton {
-  margin: 4px 1px;
-  max-height: 85px;
-  vertical-align: top;
-  white-space: normal;
-}
-
-.launchButton:hover {
-  background-color: hsla(211,79%,6%,.03);
-  border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
-}
-
-.launchButton:hover:active {
-  background-image: -moz-linear-gradient(hsla(211,79%,6%,.02), hsla(211,79%,6%,.05));
-  border-color: hsla(210,54%,20%,.2) hsla(210,54%,20%,.23) hsla(210,54%,20%,.25);
-  box-shadow: 0 1px 1px hsla(211,79%,6%,.05) inset,
-              0 0 1px hsla(211,79%,6%,.1) inset;
-  -moz-transition-duration: 0ms;
-}
-
-#launcher:not([session]) > #restorePreviousSessionSeparator,
-#launcher:not([session]) > #restorePreviousSession {
-  display: none;
-}
-
-#restorePreviousSessionSeparator {
-  width: 3px;
-  height: 116px;
-  margin: 0 10px;
-  background-image: -moz-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,.35), hsla(0,0%,100%,0)),
-                    -moz-linear-gradient(hsla(211,79%,6%,0), hsla(211,79%,6%,.2), hsla(211,79%,6%,0)),
-                    -moz-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,.35), hsla(0,0%,100%,0));
-  background-position: left top, center, right bottom;
-  background-size: 1px auto;
-  background-repeat: no-repeat;
-}
-
-body[narrow] #restorePreviousSessionSeparator {
-  margin: 0 auto;
-  width: 512px;
-  height: 3px;
-  background-image: -moz-linear-gradient(0, hsla(0,0%,100%,0), hsla(0,0%,100%,.35), hsla(0,0%,100%,0)),
-                    -moz-linear-gradient(0, hsla(211,79%,6%,0), hsla(211,79%,6%,.2), hsla(211,79%,6%,0)),
-                    -moz-linear-gradient(0, hsla(0,0%,100%,0), hsla(0,0%,100%,.35), hsla(0,0%,100%,0));
-  background-size: auto 1px;
-}
-
-#restorePreviousSession {
-  max-width: none;
-  font-size: 90%;
-}
-
-body[narrow] #restorePreviousSession {
-  font-size: 80%;
-}
-
-.launchButton::before {
-  display: block;
-  margin-bottom: 6px;
-  line-height: 0; /* remove extra vertical space due to non-zero font-size */
-}
-
-#bookmarks::before {
-  content: url("chrome://browser/content/abouthome/bookmarks.png");
-}
-
-#history::before {
-  content: url("chrome://browser/content/abouthome/history.png");
-}
-
-#settings::before {
-  content: url("chrome://browser/content/abouthome/settings.png");
-}
-
-#addons::before {
-  content: url("chrome://browser/content/abouthome/addons.png");
-}
-
-#downloads::before {
-  content: url("chrome://browser/content/abouthome/downloads.png");
-}
-
-#sync::before {
-  content: url("chrome://browser/content/abouthome/sync.png");
-}
-
-#restorePreviousSession::before {
-  content: url("chrome://browser/content/abouthome/restore-large.png");
-  display: inline-block; /* display on same line as text label */
-  vertical-align: middle;
-  margin-bottom: 0;
-  -moz-margin-end: 8px;
-}
-
-body[dir=rtl] #restorePreviousSession::before {
-  -moz-transform: scaleX(-1);
-}
-
-body[narrow] #restorePreviousSession::before {
-  content: url("chrome://browser/content/abouthome/restore.png");
-}
-
-#aboutMozilla {
-  display: block;
-  position: relative; /* pin wordmark to edge of document, not of viewport */
-  -moz-box-ordinal-group: 0;
-  opacity: .5;
-  -moz-transition: opacity 150ms;
-}
-
-#aboutMozilla:hover {
-  opacity: 1;
-}
-
-#aboutMozilla::before {
-  content: url("chrome://browser/content/abouthome/mozilla.png");
-  display: block;
-  position: absolute;
-  top: 12px;
-  right: 12px;
-}

browser/base/content/browser-syncui.js

@@ -175,7 +175,21 @@ let gSyncUI = {
     this.clearError(title);
   },
 
+  // Set visibility of "Setup Sync" link
+  showSetupSyncAboutHome: function SUI_showSetupSyncAboutHome(toShow) {
+    let browsers = gBrowser.browsers;
+    for (let i = 0; i < browsers.length; i++) {
+      let b = browsers[i];
+      if ("about:home" == b.currentURI.spec) {
+        b.contentDocument.getElementById("setupSyncLink").hidden = !toShow;
+      }
+    }
+  },
+
   onSetupComplete: function SUI_onSetupComplete() {
+    // Remove "setup sync" link in about:home if it is open. 
+    this.showSetupSyncAboutHome(false);
+
     onLoginFinish();
   },
 
@@ -223,6 +237,8 @@ let gSyncUI = {
 
   onStartOver: function SUI_onStartOver() {
     this.clearError();
+    // Make "setup sync" link visible in about:home if it is open. 
+    this.showSetupSyncAboutHome(true);
   },
 
   onQuotaNotice: function onQuotaNotice(subject, data) {

browser/base/content/browser.js

@@ -56,7 +56,6 @@
 #   Patrick Walton <pcwalton@mozilla.com>
 #   Mihai Sucan <mihai.sucan@gmail.com>
 #   Victor Porof <vporof@mozilla.com>
-#   Frank Yan <fyan@mozilla.com>
 #
 # Alternatively, the contents of this file may be used under the terms of
 # either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -2750,7 +2749,11 @@ function BrowserOnAboutPageLoad(document) {
     let ss = Components.classes["@mozilla.org/browser/sessionstore;1"].
              getService(Components.interfaces.nsISessionStore);
     if (!ss.canRestoreLastSession)
-      document.getElementById("launcher").removeAttribute("session");
+      document.getElementById("sessionRestoreContainer").hidden = true;
+    // Sync-related links
+    if (Services.prefs.prefHasUserValue("services.sync.username")) {
+      document.getElementById("setupSyncLink").hidden = true;
+    }
   }
 }
 
@@ -2758,17 +2761,19 @@ function BrowserOnAboutPageLoad(document) {
  * Handle command events bubbling up from error page content
  */
 function BrowserOnClick(event) {
-    if (!event.isTrusted || // Don't trust synthetic events
+    // Don't trust synthetic events
-        event.button == 2 || event.target.localName != "button")
+    if (!event.isTrusted ||
+        (event.target.localName != "button" &&
+         event.target.className != "sync-link"))
       return;
 
     var ot = event.originalTarget;
-    var ownerDoc = ot.ownerDocument;
+    var errorDoc = ot.ownerDocument;
 
     // If the event came from an ssl error page, it is probably either the "Add
     // Exception…" or "Get me out of here!" button
-    if (/^about:certerror/.test(ownerDoc.documentURI)) {
+    if (/^about:certerror/.test(errorDoc.documentURI)) {
-      if (ot == ownerDoc.getElementById('exceptionDialogButton')) {
+      if (ot == errorDoc.getElementById('exceptionDialogButton')) {
         var params = { exceptionAdded : false, handlePrivateBrowsing : true };
 
         try {
@@ -2776,7 +2781,7 @@ function BrowserOnClick(event) {
             case 2 : // Pre-fetch & pre-populate
               params.prefetchCert = true;
             case 1 : // Pre-populate
-              params.location = ownerDoc.location.href;
+              params.location = errorDoc.location.href;
           }
         } catch (e) {
           Components.utils.reportError("Couldn't get ssl_override pref: " + e);
@@ -2787,22 +2792,22 @@ function BrowserOnClick(event) {
 
         // If the user added the exception cert, attempt to reload the page
         if (params.exceptionAdded)
-          ownerDoc.location.reload();
+          errorDoc.location.reload();
       }
-      else if (ot == ownerDoc.getElementById('getMeOutOfHereButton')) {
+      else if (ot == errorDoc.getElementById('getMeOutOfHereButton')) {
         getMeOutOfHere();
       }
     }
-    else if (/^about:blocked/.test(ownerDoc.documentURI)) {
+    else if (/^about:blocked/.test(errorDoc.documentURI)) {
       // The event came from a button on a malware/phishing block page
       // First check whether it's malware or phishing, so that we can
       // use the right strings/links
-      var isMalware = /e=malwareBlocked/.test(ownerDoc.documentURI);
+      var isMalware = /e=malwareBlocked/.test(errorDoc.documentURI);
 
-      if (ot == ownerDoc.getElementById('getMeOutButton')) {
+      if (ot == errorDoc.getElementById('getMeOutButton')) {
         getMeOutOfHere();
       }
-      else if (ot == ownerDoc.getElementById('reportButton')) {
+      else if (ot == errorDoc.getElementById('reportButton')) {
         // This is the "Why is this site blocked" button.  For malware,
         // we can fetch a site-specific report, for phishing, we redirect
         // to the generic page describing phishing protection.
@@ -2812,7 +2817,7 @@ function BrowserOnClick(event) {
           // append the current url, and go there.
           try {
             let reportURL = formatURL("browser.safebrowsing.malware.reportURL", true);
-            reportURL += ownerDoc.location.href;
+            reportURL += errorDoc.location.href;
             content.location = reportURL;
           } catch (e) {
             Components.utils.reportError("Couldn't get malware report URL: " + e);
@@ -2826,7 +2831,7 @@ function BrowserOnClick(event) {
           }
         }
       }
-      else if (ot == ownerDoc.getElementById('ignoreWarningButton')) {
+      else if (ot == errorDoc.getElementById('ignoreWarningButton')) {
         // Allow users to override and continue through to the site,
         // but add a notify bar as a reminder, so that they don't lose
         // track after, e.g., tab switching.
@@ -2881,31 +2886,23 @@ function BrowserOnClick(event) {
         );
       }
     }
-    else if (/^about:home$/i.test(ownerDoc.documentURI)) {
+    else if (/^about:home$/i.test(errorDoc.documentURI)) {
-      if (ot == ownerDoc.getElementById("restorePreviousSession")) {
+      if (ot == errorDoc.getElementById("restorePreviousSession")) {
         let ss = Cc["@mozilla.org/browser/sessionstore;1"].
                  getService(Ci.nsISessionStore);
         if (ss.canRestoreLastSession)
           ss.restoreLastSession();
-        ownerDoc.getElementById("launcher").removeAttribute("session");
+        errorDoc.getElementById("sessionRestoreContainer").hidden = true;
       }
-      else if (ot == ownerDoc.getElementById("bookmarks")) {
+      else if (ot == errorDoc.getElementById("pairDeviceLink")) {
-        PlacesCommandHook.showPlacesOrganizer("AllBookmarks");
+        if (Services.prefs.prefHasUserValue("services.sync.username")) {
+          gSyncUI.openAddDevice();
+        } else {
+          gSyncUI.openSetup("pair");
+        }
       }
-      else if (ot == ownerDoc.getElementById("history")) {
+      else if (ot == errorDoc.getElementById("setupSyncLink")) {
-        PlacesCommandHook.showPlacesOrganizer("History");
+        gSyncUI.openSetup(null);
-      }
-      else if (ot == ownerDoc.getElementById("settings")) {
-        openPreferences();
-      }
-      else if (ot == ownerDoc.getElementById("addons")) {
-        BrowserOpenAddonsMgr();
-      }
-      else if (ot == ownerDoc.getElementById("downloads")) {
-        BrowserDownloadsUI();
-      }
-      else if (ot == ownerDoc.getElementById("sync")) {
-        openPreferences("paneSync");
       }
     }
 }

browser/base/content/test/browser_aboutHome.js

@@ -116,6 +116,117 @@ let gTests = [
     executeSoon(runNextTest);
   }
 },
+
+{
+  desc: "Check sync links visibility before and after Sync setup",
+  setup: function ()
+  {
+    try {
+      Services.prefs.clearUserPref("services.sync.username");
+    } catch (ex) {}
+    Services.obs.notifyObservers(null, "weave:service:ready", null);
+  },
+  run: function ()
+  {
+    let doc = gBrowser.selectedTab.linkedBrowser.contentDocument;
+    let pairLink = doc.getElementById("pairDeviceLink");
+    let setupLink = doc.getElementById("setupSyncLink");
+
+    ok(pairLink, "Found 'Pair Device' link");
+    ok(setupLink, "Found 'Set Up Sync' link");
+    ok(!pairLink.hidden, "'Pair' link is visible before setup");
+    ok(!setupLink.hidden, "'Set Up' link is visible before setup");
+
+    Services.obs.notifyObservers(null, "weave:service:setup-complete", null);
+
+    executeSoon(function () {
+      setupLink = doc.getElementById("setupSyncLink");
+      ok(setupLink.hidden, "'Set Up' link is hidden after setup");
+      ok(!pairLink.hidden, "'Pair' link is visible after setup");
+
+      executeSoon(runNextTest);
+    });
+  }
+},
+
+{
+  desc: "Check sync links visibility before and after Sync unlink",
+  setup: function ()
+  {
+    Services.prefs.setCharPref("services.sync.username", "someuser@domain.com");
+    Services.obs.notifyObservers(null, "weave:service:ready", null);
+  },
+  run: function ()
+  {
+    let doc = gBrowser.selectedTab.linkedBrowser.contentDocument;
+    let pairLink = doc.getElementById("pairDeviceLink");
+    let setupLink = doc.getElementById("setupSyncLink");
+
+    ok(!pairLink.hidden, "'Pair' link is visible before unlink");
+    ok(setupLink.hidden, "'Set Up' link is hidden before unlink");
+
+    Services.obs.notifyObservers(null, "weave:service:start-over", null);
+
+    executeSoon(function () {
+      setupLink = doc.getElementById("setupSyncLink");
+      ok(!setupLink.hidden, "'Set Up' link is visible after unlink");
+      ok(!pairLink.hidden, "'Pair' link is visible after unlink");
+      executeSoon(runNextTest);
+    });
+  }
+},
+
+{
+  desc: "Check Pair Device link opens correct dialog with Sync account ",
+  setup: function ()
+  {
+    Services.prefs.setCharPref("services.sync.username", "someuser@domain.com");
+    Services.obs.notifyObservers(null, "weave:service:ready", null);
+  },
+  run: function ()
+  {
+    expectDialogWindow("Sync:AddDevice");
+    let browser = gBrowser.selectedTab.linkedBrowser;
+    let button = browser.contentDocument.getElementById("pairDeviceLink");
+    EventUtils.sendMouseEvent({type: "click"}, button, browser.contentWindow);
+  }
+},
+
+{
+  desc: "Check Pair Device link opens correct dialog without Sync account",
+  setup: function ()
+  {
+    try {
+      Services.prefs.clearUserPref("services.sync.username");
+    } catch (ex) {}
+    Services.obs.notifyObservers(null, "weave:service:ready", null);
+  },
+  run: function ()
+  {
+    expectDialogWindow("Weave:AccountSetup");
+    let browser = gBrowser.selectedTab.linkedBrowser;
+    let button = browser.contentDocument.getElementById("pairDeviceLink");
+    EventUtils.sendMouseEvent({type: "click"}, button, browser.contentWindow);
+  }
+},
+
+{
+  desc: "Check Sync Setup link opens correct dialog (without Sync account)",
+  setup: function ()
+  {
+    try {
+      Services.prefs.clearUserPref("services.sync.username");
+    } catch (ex) {}
+    Services.obs.notifyObservers(null, "weave:service:ready", null);
+  },
+  run: function ()
+  {
+    expectDialogWindow("Weave:AccountSetup");
+    let browser = gBrowser.selectedTab.linkedBrowser;
+    let button = browser.contentDocument.getElementById("setupSyncLink");
+    EventUtils.sendMouseEvent({type: "click"}, button, browser.contentWindow);
+  }
+},
 ];
 
 function test()

browser/base/jar.mn

@@ -16,21 +16,13 @@ browser.jar:
 *       content/browser/aboutDialog.js                (content/aboutDialog.js)
 *       content/browser/aboutDialog.css               (content/aboutDialog.css)
 *       content/browser/aboutRobots.xhtml             (content/aboutRobots.xhtml)
-*       content/browser/abouthome/aboutHome.xhtml     (content/abouthome/aboutHome.xhtml)
+*       content/browser/aboutHome.xhtml               (content/aboutHome.xhtml)
-*       content/browser/abouthome/aboutHome.js        (content/abouthome/aboutHome.js)
+*       content/browser/aboutHome.js                  (content/aboutHome.js)
-*       content/browser/abouthome/aboutHome.css       (content/abouthome/aboutHome.css)
+*       content/browser/aboutHome.css                 (content/aboutHome.css)
-        content/browser/abouthome/snippet1.png        (content/abouthome/snippet1.png)
+        content/browser/aboutHome-restore-icon.png    (content/aboutHome-restore-icon.png)
-        content/browser/abouthome/snippet2.png        (content/abouthome/snippet2.png)
+        content/browser/aboutHome-restore-icon-small.png    (content/aboutHome-restore-icon-small.png)
-        content/browser/abouthome/bookmarks.png       (content/abouthome/bookmarks.png)
+        content/browser/aboutHome-snippet1.png        (content/aboutHome-snippet1.png)
-        content/browser/abouthome/history.png         (content/abouthome/history.png)
+        content/browser/aboutHome-snippet2.png        (content/aboutHome-snippet2.png)
-        content/browser/abouthome/settings.png        (content/abouthome/settings.png)
-        content/browser/abouthome/addons.png          (content/abouthome/addons.png)
-        content/browser/abouthome/downloads.png       (content/abouthome/downloads.png)
-        content/browser/abouthome/sync.png            (content/abouthome/sync.png)
-        content/browser/abouthome/restore.png         (content/abouthome/restore.png)
-        content/browser/abouthome/restore-large.png   (content/abouthome/restore-large.png)
-        content/browser/abouthome/mozilla.png         (content/abouthome/mozilla.png)
-        content/browser/abouthome/noise.png           (content/abouthome/noise.png)
         content/browser/aboutRobots-icon.png          (content/aboutRobots-icon.png)
         content/browser/aboutRobots-widget-left.png   (content/aboutRobots-widget-left.png)
 *       content/browser/browser.css                   (content/browser.css)

browser/components/about/AboutRedirector.cpp

@@ -102,7 +102,7 @@ static RedirEntry kRedirMap[] = {
   { "sync-tabs", "chrome://browser/content/sync/aboutSyncTabs.xul",
     nsIAboutModule::ALLOW_SCRIPT },
 #endif
-  { "home", "chrome://browser/content/abouthome/aboutHome.xhtml",
+  { "home", "chrome://browser/content/aboutHome.xhtml",
     nsIAboutModule::URI_SAFE_FOR_UNTRUSTED_CONTENT |
     nsIAboutModule::ALLOW_SCRIPT },
   { "newtab", "chrome://browser/content/newtab/newTab.xul",

browser/components/nsBrowserContentHandler.js

@@ -887,7 +887,7 @@ let AboutHomeUtils = {
 
   loadSnippetsURL: function AHU_loadSnippetsURL()
   {
-    const STARTPAGE_VERSION = 2;
+    const STARTPAGE_VERSION = 1;
     let updateURL = Services.prefs
                             .getCharPref(this.SNIPPETS_URL_PREF)
                             .replace("%STARTPAGE_VERSION%", STARTPAGE_VERSION);

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

@@ -1,7 +1,6 @@
-<!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd">
+<!ENTITY % brandDTD
-%brandDTD;
+    SYSTEM "chrome://branding/locale/brand.dtd">
-<!ENTITY % syncBrandDTD SYSTEM "chrome://browser/locale/syncBrand.dtd">
+  %brandDTD;
-%syncBrandDTD;
 
 <!-- These strings are used in the about:home page -->
 
@@ -9,6 +8,8 @@
 
 <!ENTITY abouthome.searchEngineButton.label "Search">
 
+<!ENTITY abouthome.aboutMozilla "About Mozilla">
+
 <!-- LOCALIZATION NOTE (abouthome.defaultSnippet1.v1):
      text in <a/> will be linked to the Firefox features page on mozilla.com
 -->
@@ -18,8 +19,5 @@
 -->
 <!ENTITY abouthome.defaultSnippet2.v1 "It's easy to customize your Firefox exactly the way you want it. <a>Choose from thousands of add-ons</a>.">
 
-<!ENTITY abouthome.bookmarksButton.label "Bookmarks">
+<!ENTITY abouthome.syncSetup.label   "Set Up Sync">
-<!ENTITY abouthome.historyButton.label   "History">
+<!ENTITY abouthome.pairDevice.label  "Pair a Device">
-<!ENTITY abouthome.settingsButton.label  "Settings">
-<!ENTITY abouthome.addonsButton.label    "Add-ons">
-<!ENTITY abouthome.downloadsButton.label "Downloads">