Bug 631257 - Only default snippets are styled in Firefox Start Page design. r=gavin a=blocking

browser/base/content/aboutHome.css

@@ -83,7 +83,7 @@ a:hover {
   min-height: 90px;
 }
 
-#searchContainer:before {
+#searchContainer::before {
   content: " ";
   display: block;
   height: 23%;
@@ -212,7 +212,7 @@ body[dir=rtl] #searchSubmit:active {
   text-align: center;
 }
 
-#defaultSnippets {
+#snippets {
   display: inline-block;
   padding: 14px;
   width: 30%;
@@ -231,14 +231,14 @@ body[dir=rtl] #searchSubmit:active {
 }
 
 @media all and (max-width: 470px) {
-  #defaultSnippets { width: 65% }
+  #snippets { width: 65% }
 }
 
 @media all and (min-width: 470px) and (max-width: 850px) {
-  #defaultSnippets { width: 45% }
+  #snippets { width: 45% }
 }
 
-#defaultSnippets:hover {
+#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,
@@ -248,7 +248,7 @@ body[dir=rtl] #searchSubmit:active {
               0 2px 4px rgba(0,0,0,.2);
 }
 
-#defaultSnippets:hover:active {
+#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);

browser/base/content/aboutHome.js

@@ -232,10 +232,10 @@ function loadSnippets()
 
 function showSnippets()
 {
+  let snippetsElt = document.getElementById("snippets");
   let snippets = localStorage["snippets"];
   // If there are remotely fetched snippets, try to to show them.
   if (snippets) {
-    let snippetsElt = document.getElementById("snippets");
     // Injecting snippets can throw if they're invalid XML.
     try {
       snippetsElt.innerHTML = snippets;
@@ -247,7 +247,6 @@ function showSnippets()
         relocatedScript.text = elt.text;
         elt.parentNode.replaceChild(relocatedScript, elt);
       });
-      snippetsElt.hidden = false;
       return;
     } catch (ex) {
       // Bad content, continue to show default snippets.
@@ -263,13 +262,31 @@ function showSnippets()
   // Inject url in the eventual link.
   if (DEFAULT_SNIPPETS_URLS[randIndex]) {
     let links = entry.getElementsByTagName("a");
-    if (links.length != 1)
-      return; // Something is messed up in this entry, we support just 1 link.
+    // Default snippets can have only one link, otherwise something is messed
+    // up in the translation.
+    if (links.length == 1) {
       links[0].href = DEFAULT_SNIPPETS_URLS[randIndex];
-    defaultSnippetsElt.addEventListener("click", function(aEvent) {
+      activateSnippetsButtonClick(entry);
+    }
+  }
+  // Move the default snippet to the snippets element.
+  snippetsElt.appendChild(entry);
+}
+
+/**
+ * Searches a single link element in aElt and binds its href to the click
+ * action of the snippets button.
+ *
+ * @param aElt
+ *        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);
   }
-  entry.hidden = false;
 }

browser/base/content/aboutHome.xhtml

@@ -86,12 +86,11 @@
 
     <div id="contentContainer">
       <div id="snippetContainer">
-        <div id="defaultSnippets">
-          <span hidden="true">&abouthome.defaultSnippet1.v1;</span>
-          <span hidden="true">&abouthome.defaultSnippet2.v1;</span>
+        <div id="defaultSnippets" hidden="true">
+          <span>&abouthome.defaultSnippet1.v1;</span>
+          <span>&abouthome.defaultSnippet2.v1;</span>
         </div>
-
-        <div id="snippets" hidden="true"/>
+        <div id="snippets"/>
       </div>
 
       <div id="sessionRestoreContainer">

browser/base/content/test/browser_aboutHome.js

@@ -85,11 +85,10 @@ let gTests = [
   run: function ()
   {
     let doc = gBrowser.selectedTab.linkedBrowser.contentDocument;
-    let snippetsElt = doc.getElementById("defaultSnippets");
-    ok(snippetsElt, "Found default snippets element")
-    ok(Array.some(snippetsElt.getElementsByTagName("span"), function(elt) {
-      return !elt.hidden;
-    }), "A default snippet is visible.");
+    let snippetsElt = doc.getElementById("snippets");
+    ok(snippetsElt, "Found snippets element")
+    is(snippetsElt.getElementsByTagName("span").length, 1,
+       "A default snippet is visible.");
     executeSoon(runNextTest);
   }
 },
@@ -108,13 +107,8 @@ let gTests = [
 
     let snippetsElt = doc.getElementById("snippets");
     ok(snippetsElt, "Found snippets element");
-    ok(snippetsElt.hidden, "Snippets element is hidden");
-
-    let defaultsElt = doc.getElementById("defaultSnippets");
-    ok(defaultsElt, "Found default snippets element")
-    ok(Array.some(defaultsElt.getElementsByTagName("span"), function(elt) {
-      return !elt.hidden;
-    }), "A default snippet is visible.");
+    is(snippetsElt.getElementsByTagName("span").length, 1,
+       "A default snippet is visible.");
 
     executeSoon(runNextTest);
   }