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 id18691
push usermmmulani@uwaterloo.ca
push dateThu, 10 Feb 2011 22:27:07 +0000
treeherdermozilla-central@00678ee61f4a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgavin, blocking
bugs631257
milestone2.0b12pre
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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()