Bug 631257 - Only default snippets are styled in Firefox Start Page design. r=gavin a=blocking
authorMarco Bonardo <mbonardo@mozilla.com>
Fri, 04 Feb 2011 18:26:00 -0800
changeset 62310 346e58464d3ddbebcd309ba1cc0486f2dc3a3493
parent 62309 9e27e7d046990bc40b502e5710aadeed7799cfed
child 62311 00678ee61f4ab5f211b1fad940c76e3f8c7c77ac
push idunknown
push userunknown
push dateunknown
reviewersgavin, blocking
bugs631257
milestone2.0b12pre
Bug 631257 - Only default snippets are styled in Firefox Start Page design. r=gavin a=blocking
browser/base/content/aboutHome.css
browser/base/content/aboutHome.js
browser/base/content/aboutHome.xhtml
browser/base/content/test/browser_aboutHome.js
--- a/browser/base/content/aboutHome.css
+++ b/browser/base/content/aboutHome.css
@@ -78,17 +78,17 @@ a:hover {
   height: 100%;
 }
 
 #searchContainer {
   height: 15%;
   min-height: 90px;
 }
 
-#searchContainer:before {
+#searchContainer::before {
   content: " ";
   display: block;
   height: 23%;
 }
 
 #searchForm {
   display: table;
   width: 100%;
@@ -207,17 +207,17 @@ body[dir=rtl] #searchSubmit:active {
 }
 
 #snippetContainer {
   position: relative;
   top: -24px;
   text-align: center;
 }
 
-#defaultSnippets {
+#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,
@@ -226,34 +226,34 @@ body[dir=rtl] #searchSubmit:active {
               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;
 }
 
 @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,
               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);
 }
 
-#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);
 }
 
 #sessionRestoreContainer {
   padding-top: 1.5%;
   text-align: center;
--- a/browser/base/content/aboutHome.js
+++ b/browser/base/content/aboutHome.js
@@ -227,49 +227,66 @@ function loadSnippets()
     xhr.send(null);
   } else {
     showSnippets();
   }
 }
 
 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;
       // Scripts injected by innerHTML are inactive, so we have to relocate them
       // through DOM manipulation to activate their contents.
       Array.forEach(snippetsElt.getElementsByTagName("script"), function(elt) {
         let relocatedScript = document.createElement("script");
         relocatedScript.type = "text/javascript;version=1.8";
         relocatedScript.text = elt.text;
         elt.parentNode.replaceChild(relocatedScript, elt);
       });
-      snippetsElt.hidden = false;
       return;
     } catch (ex) {
       // Bad content, continue to show default snippets.
     }
   }
 
   // Show default snippets otherwise.
   let defaultSnippetsElt = document.getElementById("defaultSnippets");
   let entries = defaultSnippetsElt.querySelectorAll("span");
   // Choose a random snippet.  Assume there is always at least one.
   let randIndex = Math.round(Math.random() * (entries.length - 1));
   let entry = entries[randIndex];
   // 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.
-    links[0].href = DEFAULT_SNIPPETS_URLS[randIndex];
-    defaultSnippetsElt.addEventListener("click", function(aEvent) {
+    // 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];
+      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;
 }
--- a/browser/base/content/aboutHome.xhtml
+++ b/browser/base/content/aboutHome.xhtml
@@ -81,22 +81,21 @@
         <div id="searchButtons">
           <input id="searchSubmit" type="submit" value="&abouthome.searchEngineButton.label;" />
         </div>
       </form>
     </div>
 
     <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">
         <button id="restorePreviousSession">&historyRestoreLastSession.label;</button>
       </div>
     </div>
 
     <div id="bottomSection">
--- a/browser/base/content/test/browser_aboutHome.js
+++ b/browser/base/content/test/browser_aboutHome.js
@@ -80,21 +80,20 @@ let gTests = [
 {
   desc: "Check default snippets are shown",
   setup: function ()
   {
   },
   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);
   }
 },
 
 {
   desc: "Check default snippets are shown if snippets are invalid xml",
   setup: function ()
   {
@@ -103,23 +102,18 @@ let gTests = [
     storage.setItem("snippets", "<p><b></p></b>");
   },
   run: function ()
   {
     let doc = gBrowser.selectedTab.linkedBrowser.contentDocument;
 
     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);
   }
 },
 
 ];
 
 function test()