Bug 765411 - Performance improvements for about:home. r=dao
authorJared Wein <jwein@mozilla.com>
Thu, 05 Jul 2012 13:04:31 -0700
changeset 98436 e5248b32d1b6ece115548982e909799739e5b5a5
parent 98435 9ad624cd2791a4148e5d468750447042072c0d75
child 98437 b84af5d0c13c73da78aa54439326589e9d3ab3dd
child 98643 69062ce3781863f34af43016f7fd94b27352045e
push id23057
push userryanvm@gmail.com
push dateFri, 06 Jul 2012 00:26:58 +0000
treeherdermozilla-central@4b1249ae1906 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs765411
milestone16.0a1
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 765411 - Performance improvements for about:home. r=dao
browser/base/content/abouthome/aboutHome.css
browser/base/content/abouthome/aboutHome.js
browser/base/content/abouthome/aboutHome.xhtml
--- a/browser/base/content/abouthome/aboutHome.css
+++ b/browser/base/content/abouthome/aboutHome.css
@@ -38,16 +38,17 @@ a {
 }
 
 #topSection {
   text-align: center;
 }
 
 #brandLogo {
   height: 154px;
+  width: 154px;
   margin: 22px 0 31px;
 }
 
 #searchForm,
 #snippets {
   width: 470px;
 }
 
@@ -59,16 +60,18 @@ a {
   display: -moz-box;
   -moz-box-align: center;
   padding-top: 2px;
   -moz-padding-end: 8px;
 }
 
 #searchEngineLogo {
   display: inline-block;
+  height: 28px;
+  width: 70px;
 }
 
 #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);
@@ -77,17 +80,18 @@ a {
               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 {
+#searchText:focus,
+#searchText[autofocus] {
   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;
@@ -101,22 +105,24 @@ body[dir=rtl] #searchText {
   -moz-transition-duration: 150ms;
 }
 
 body[dir=rtl] #searchSubmit {
   border-radius: 2.5px 0 0 2.5px;
 }
 
 #searchText:focus + #searchSubmit,
-#searchText + #searchSubmit:hover {
+#searchText + #searchSubmit:hover,
+#searchText[autofocus] + #searchSubmit {
   border-color: #59b5fc #45a3e7 #3294d5;
   color: white;
 }
 
-#searchText:focus + #searchSubmit {
+#searchText:focus + #searchSubmit,
+#searchText[autofocus] + #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);
@@ -155,16 +161,22 @@ body[dir=rtl] #defaultSnippet2 {
 }
 
 #snippets {
   display: inline-block;
   text-align: start;
   margin: 12px 0;
   color: #3c3c3c;
   font-size: 75%;
+  /* 17px is approx. the default line-height as measured on Windows 7 Segoe UI.
+     12px is 75% of approx. the default font-size as measured on Windows 7 Segoe UI.
+     The 17/12 is here to convert em from units of font-size to units of
+     line-height. The goal here is to initialize at the height of a
+     three-line snippet to reduce visual moving/flickering. */
+  min-height: -moz-calc(17/12 * 3em);
 }
 
 #launcher {
   display: -moz-box;
   -moz-box-align: center;
   -moz-box-pack: center;
   width: 100%;
   background-color: hsla(0,0%,0%,.03);
@@ -251,18 +263,19 @@ body[narrow] #restorePreviousSessionSepa
 }
 
 body[narrow] #restorePreviousSession {
   font-size: 80%;
 }
 
 .launchButton::before {
   display: block;
+  width: 32px;
   height: 32px;
-  margin-bottom: 6px;
+  margin: 0 auto 6px;
   line-height: 0; /* remove extra vertical space due to non-zero font-size */
 }
 
 #downloads::before {
   content: url("chrome://browser/content/abouthome/downloads.png");
 }
 
 #bookmarks::before {
--- a/browser/base/content/abouthome/aboutHome.js
+++ b/browser/base/content/abouthome/aboutHome.js
@@ -160,16 +160,25 @@ function setupSearchEngine()
 
   // Add search engine logo.
   if (gSearchEngine.image) {
     let logoElt = document.getElementById("searchEngineLogo");
     logoElt.src = gSearchEngine.image;
     logoElt.alt = gSearchEngine.name;
   }
 
+  // The "autofocus" attribute doesn't focus the form element
+  // immediately when the element is first drawn, so the
+  // attribute is also used for styling when the page first loads.
+  let searchText = document.getElementById("searchText");
+  searchText.addEventListener("blur", function searchText_onBlur(e) {
+    searchText.removeEventListener("blur", searchText_onBlur);
+    e.target.removeAttribute("autofocus");
+  });
+
 }
 
 function loadSnippets()
 {
   // Check last snippets update.
   let lastUpdate = localStorage["snippets-last-update"];
   let updateURL = localStorage["snippets-update-url"];
   if (updateURL && (!lastUpdate ||
--- a/browser/base/content/abouthome/aboutHome.xhtml
+++ b/browser/base/content/abouthome/aboutHome.xhtml
@@ -20,19 +20,16 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>&abouthome.pageTitle;</title>
 
     <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"/>
-
-    <script type="text/javascript;version=1.8"
-            src="chrome://browser/content/abouthome/aboutHome.js"/>
   </head>
 
   <body dir="&locale.dir;">
     <div class="spacer"/>
     <div id="topSection">
       <img id="brandLogo" src="chrome://branding/content/about-logo.png" alt=""/>
 
       <div id="searchContainer">
@@ -62,10 +59,13 @@
       <button class="launchButton" id="addons">&abouthome.addonsButton.label;</button>
       <button class="launchButton" id="sync">&abouthome.syncButton.label;</button>
       <button class="launchButton" id="settings">&abouthome.settingsButton.label;</button>
       <div id="restorePreviousSessionSeparator"/>
       <button class="launchButton" id="restorePreviousSession">&historyRestoreLastSession.label;</button>
     </div>
 
     <a id="aboutMozilla" href="http://www.mozilla.org/about/"/>
+
+    <script type="text/javascript;version=1.8"
+            src="chrome://browser/content/abouthome/aboutHome.js"/>
   </body>
 </html>