Change to use CSS media queries instead of using the "small" class name

to reduce the number of layouts needed at startup.

This also fixes an issue where starting in LIST mode did not work.

And it also fixes an issue where the width transition wasn't working
correctly.

BUG=13362

TEST=Starting in small and normal mode should still work

Review URL: http://codereview.chromium.org/155116

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@20158 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/new_new_tab.css

@@ -19,10 +19,6 @@ html[dir='rtl'] #main {
   background-position-x: 100%;
 }
 
-.small #main {
-  width: 692px;
-}
-
 html[anim='false'] *,
 .no-anim, .no-anim *,
 .loading * {
@@ -41,10 +37,6 @@ html[anim='false'] *,
   -webkit-transition: height .5s, opacity .5s;
 }
 
-.small #most-visited {
-  height: 294px;
-}
-
 @-webkit-keyframes 'thumbnail-enter' {
   /* 2.5s */
   0%, 20% {
@@ -93,6 +85,10 @@ html[anim='false'] *,
   -webkit-transition: left .5s, top .5s;
 }
 
+.list > .thumbnail-container {
+  -webkit-transition: left .5s, top .5s, width .5s;
+}
+
 .thumbnail,
 .thumbnail-container > .title {
   width: 212px; /* natural size is 196 */
@@ -100,12 +96,6 @@ html[anim='false'] *,
   -webkit-transition: width .5s, height .5s;
 }
 
-.small .thumbnail,
-.small .thumbnail-container > .title {
-  width: 150px;
-  height: 93px;
-}
-
 .thumbnail-wrapper {
   display: block;
   -webkit-background-size: 212px 132px;
@@ -115,10 +105,6 @@ html[anim='false'] *,
   -webkit-transition: -webkit-background-size .5s;
 }
 
-.small .thumbnail-wrapper {
-  -webkit-background-size: 150px 93px;
-}
-
 .filler * {
   visibility: hidden;
 }
@@ -228,8 +214,7 @@ html[anim='false'] *,
   color: hsl(213, 90%, 24%);
 }
 
-.thumbnail-container > .title,
-.small .thumbnail-container > .title {
+.thumbnail-container > .title {
   line-height: 16px;
   height: 16px;
   margin: 0;
@@ -238,7 +223,7 @@ html[anim='false'] *,
   font-weight:normal;
   padding: 0 3px;
   opacity: 1;
-  -webkit-transition: opacity .5s;
+  -webkit-transition: opacity .5s, width .5s;
   color: black;
 }
 
@@ -352,10 +337,6 @@ html[dir=rtl] .thumbnail-container > .title > div {
   text-overflow: ellipsis;
 }
 
-.small #notification > * {
-  max-width: 300px;
-}
-
 #notification:hover,
 #notification.show {
   opacity: 1;
@@ -373,22 +354,17 @@ html[dir=rtl] .thumbnail-container > .title > div {
   display: none;
 }
 
-.list .title,
-.small .list .title {
-  width: auto;
-}
-
 .list > .thumbnail-container {
   -webkit-box-sizing: border-box;
 }
 
-.list .title,
-.small .list .title {
+.list > .thumbnail-container > .title {
   font-size: 140%;
   line-height: 40px;
   height: 40px;
   color: hsl(213, 27%, 68%);
   text-decoration: underline;
+  width: 100%;
 }
 
 .list .title > div {
@@ -558,10 +534,6 @@ html[dir='rtl'] #view-toolbar {
                    load */
 }
 
-.small #lower-sections > .section {
-  width: 336px; /* Same here, see above */
-}
-
 #lower-sections .spacer {
   width: 20px;
   -webkit-transition: width .5s;
@@ -656,3 +628,79 @@ html[dir='rtl'] #option-menu {
   background-color: hsla(213, 66%, 57%, 1);
   color: white;
 }
+
+/* Hard code thumbnail positions to improve initial layout speed */
+#t0, #t4 {
+  left: 0;
+}
+
+#t1, #t5 {
+  left: 240px;
+}
+
+#t2, #t6 {
+  left: 480px;
+}
+
+#t3, #t7 {
+  left: 720px;
+}
+
+#t4, #t5, #t6, #t7 {
+  top: 186px;
+}
+
+/* small */
+
+@media (max-width: 940px) {
+
+  #main {
+    width: 692px;
+  }
+
+  #most-visited {
+    height: 294px;
+  }
+
+  .thumbnail,
+  .thumbnail-container > .title {
+    width: 150px;
+    height: 93px;
+  }
+
+  .thumbnail-container > .title {
+    height: auto;
+  }
+
+  .thumbnail-wrapper {
+    -webkit-background-size: 150px 93px;
+  }
+
+  #notification > * {
+    max-width: 300px;
+  }
+
+  #lower-sections > .section {
+    width: 336px; /* Same here, see above */
+  }
+
+  #t0, #t4 {
+    left: 0;
+  }
+
+  #t1, #t5 {
+    left: 178px;
+  }
+
+  #t2, #t6 {
+    left: 356px;
+  }
+
+  #t3, #t7 {
+    left: 534px;
+  }
+
+  #t4, #t5, #t6, #t7 {
+    top: 147px;
+  }
+}

chrome/browser/resources/new_new_tab.html

@@ -50,7 +50,7 @@ logEvent('log start');
 <link rel="stylesheet" href="new_new_tab.css">
 <link id="themecss" rel="stylesheet" href="chrome://theme/css/newtab.css">
 </head>
-<body class="small loading"
+<body class="loading"
       jsvalues=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
 
 <div id="main">
@@ -83,7 +83,7 @@ logEvent('log start');
   </div>
 
   <div id="most-visited" jsskip="true">
-    <a class="thumbnail-container filler">
+    <a class="thumbnail-container filler" id="t0">
       <div class="edit-mode-border">
         <div class="edit-bar">
           <div class="pin"></div>
@@ -99,7 +99,7 @@ logEvent('log start');
       </div>
     </a>
 
-    <a class="thumbnail-container filler" style="left:178px">
+    <a class="thumbnail-container filler" id="t1">
       <div class="edit-mode-border">
         <div class="edit-bar">
           <div class="pin"></div>
@@ -115,7 +115,7 @@ logEvent('log start');
       </div>
     </a>
 
-    <a class="thumbnail-container filler" style="left:356px">
+    <a class="thumbnail-container filler" id="t2">
       <div class="edit-mode-border">
         <div class="edit-bar">
           <div class="pin"></div>
@@ -131,7 +131,7 @@ logEvent('log start');
       </div>
     </a>
 
-    <a class="thumbnail-container filler" style="left:534px">
+    <a class="thumbnail-container filler" id="t3">
       <div class="edit-mode-border">
         <div class="edit-bar">
           <div class="pin"></div>
@@ -147,7 +147,7 @@ logEvent('log start');
       </div>
     </a>
 
-    <a class="thumbnail-container filler" style="top:147px">
+    <a class="thumbnail-container filler" id="t4">
       <div class="edit-mode-border">
         <div class="edit-bar">
           <div class="pin"></div>
@@ -163,7 +163,7 @@ logEvent('log start');
       </div>
     </a>
 
-    <a class="thumbnail-container filler" style="left:178px;top:147px">
+    <a class="thumbnail-container filler" id="t5">
       <div class="edit-mode-border">
         <div class="edit-bar">
           <div class="pin"></div>
@@ -179,7 +179,7 @@ logEvent('log start');
       </div>
     </a>
 
-    <a class="thumbnail-container filler" style="left:356px;top:147px">
+    <a class="thumbnail-container filler" id="t6">
       <div class="edit-mode-border">
         <div class="edit-bar">
           <div class="pin"></div>
@@ -195,7 +195,7 @@ logEvent('log start');
       </div>
     </a>
 
-    <a class="thumbnail-container filler" style="left:534px;top:147px">
+    <a class="thumbnail-container filler" id="t7">
       <div class="edit-mode-border">
         <div class="edit-bar">
           <div class="pin"></div>

chrome/browser/resources/new_new_tab.js

@@ -106,8 +106,8 @@ function onShownSections(mask) {
   if (mask != shownSections) {
 
     // Only invalidate most visited if needed.
-    if (mask & Section.THUMB != shownSections & Section.THUMB ||
-        mask & Section.LIST != shownSections & Section.LIST) {
+    if ((mask & Section.THUMB) != (shownSections & Section.THUMB) ||
+        (mask & Section.LIST) != (shownSections & Section.LIST)) {
       mostVisited.invalidate();
     }
 
@@ -213,32 +213,30 @@ function chromeSend(name, params, callbackName, callback) {
 }
 
 function useSmallGrid() {
-  return document.body.clientWidth <= 940;
+  return window.innerWidth <= 940;
 }
 
-function handleWindowResize(e, opt_noUpdate) {
-  var body = document.body;
-  if (!body || body.clientWidth < 10) {
+var LayoutMode = {
+  SMALL: 1,
+  NORMAL: 2
+};
+
+var layoutMode = useSmallGrid() ? LayoutMode.SMALL : LayoutMode.NORMAL;
+
+function handleWindowResize() {
+  if (window.innerWidth < 10) {
     // We're probably a background tab, so don't do anything.
     return;
   }
 
-  var hasSmallClass = hasClass(body, 'small');
-  if (hasSmallClass && !useSmallGrid()) {
-    removeClass(body, 'small');
-    mostVisited.invalidate();
-    if (!opt_noUpdate) {
-      mostVisited.layout();
-      layoutLowerSections();
-    }
-  } else if (!hasSmallClass && useSmallGrid()) {
-    addClass(body, 'small');
+  var oldLayoutMode = layoutMode;
+  layoutMode = useSmallGrid() ? LayoutMode.SMALL : LayoutMode.NORMAL
+
+  if (layoutMode != oldLayoutMode){
     mostVisited.invalidate();
-    if (!opt_noUpdate) {
     mostVisited.layout();
     layoutLowerSections();
   }
-  }
 }
 
 /**
@@ -513,6 +511,9 @@ var mostVisited = {
       for (var i = 0; i < thumbnails.length; i++) {
         var t = thumbnails[i];
 
+        // Remove temporary ID that was used during startup layout.
+        t.id = '';
+
         var row, col;
         if (shownSections & Section.THUMB) {
           row = Math.floor(i / cols);
@@ -680,7 +681,7 @@ function updateOptionMenu() {
 // We apply the size class here so that we don't trigger layout animations
 // onload.
 
-handleWindowResize(null, true);
+handleWindowResize();
 
 var localStrings = new LocalStrings();