From 9b83b4880858f85eb0ec47929fa6505553d29614 Mon Sep 17 00:00:00 2001
From: "arv@chromium.org"
 <arv@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>
Date: Fri, 16 Oct 2009 19:47:41 +0000
Subject: NTP: Fix startup visual state

This inject the template data earlier in the document so that we can set
the initial visual state based on the user preference. This prevents
flickering when the user is not showing the most visited thumbnails.

BUG=24513

TEST=Use a theme with a background image to make this easier to spot.
Hide the most visited. Restart Chrome. The thumbnails should not flicker

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

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@29314 0039d316-1c4b-4281-b951-d872f2087c98
---
 chrome/browser/resources/new_new_tab.css  |  72 ++-------
 chrome/browser/resources/new_new_tab.html | 238 ++++++++++++++++--------------
 chrome/browser/resources/new_new_tab.js   | 160 +++-----------------
 3 files changed, 161 insertions(+), 309 deletions(-)

(limited to 'chrome/browser/resources')

diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index 1ad7d3b..6436802 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -39,15 +39,13 @@ html[anim='false'] *,
 
 .thumbnail-container {
   position: absolute;
-  -webkit-transition: top .15s, left .15s;
   color: black;
   text-decoration: none;
-  -webkit-transition: left .15s, top .15s;
+  -webkit-transition: left .15s, right .15s, top .15s;
 }
 
 .list > .thumbnail-container {
-  -webkit-transition: left .15s, top .15s, width .15s;
-  overflow: hidden;
+    overflow: hidden;
 }
 
 /* hide outline in thumbnail view */
@@ -294,6 +292,11 @@ html[dir=rtl] .thumbnail-container > .title > div {
   visibility: hidden !important;
 }
 
+.collapsed {
+  height: 0 !important;
+  opacity: 0;
+}
+
 @-webkit-keyframes 'fade-in' {
   0% {
     opacity: 0;
@@ -666,33 +669,12 @@ html[dir='rtl'] #option-menu > [command='hide']:before {
   background-image: url(chrome://theme/newtab_checkbox_white);
 }
 
-/* Hard code thumbnail positions to improve initial layout speed */
-#t0, #t4,
-html[dir='rtl'] #t3,
-html[dir='rtl'] #t7 {
-  left: 0;
+#most-visited.list {
+  height: 294px;
 }
 
-#t1, #t5,
-html[dir='rtl'] #t2,
-html[dir='rtl'] #t6 {
-  left: 235px;
-}
-
-#t2, #t6,
-html[dir='rtl'] #t1,
-html[dir='rtl'] #t5 {
-  left: 470px;
-}
-
-#t3, #t7,
-html[dir='rtl'] #t0,
-html[dir='rtl'] #t4 {
-  left: 705px;
-}
-
-#t4, #t5, #t6, #t7 {
-  top: 183px;
+.list > .thumbnail-container {
+  max-width: 920px;
 }
 
 /* tip line */
@@ -743,6 +725,10 @@ html[dir='rtl'] #t4 {
     -webkit-background-size: 150px 93px;
   }
 
+  .list > .thumbnail-container {
+    max-width: 692px;
+  }
+
   #notification > * {
     max-width: 300px;
   }
@@ -750,32 +736,4 @@ html[dir='rtl'] #t4 {
   #notification > span > .blacklist-title {
     max-width: 15ex;
   }
-
-  #t0, #t4,
-  html[dir='rtl'] #t3,
-  html[dir='rtl'] #t7 {
-    left: 0;
-  }
-
-  #t1, #t5,
-  html[dir='rtl'] #t2,
-  html[dir='rtl'] #t6 {
-    left: 178px;
-  }
-
-  #t2, #t6,
-  html[dir='rtl'] #t1,
-  html[dir='rtl'] #t5 {
-    left: 356px;
-  }
-
-  #t3, #t7,
-  html[dir='rtl'] #t0,
-  html[dir='rtl'] #t4 {
-    left: 534px;
-  }
-
-  #t4, #t5, #t6, #t7 {
-    top: 147px;
-  }
 }
diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html
index e42abac..f4c9783 100644
--- a/chrome/browser/resources/new_new_tab.html
+++ b/chrome/browser/resources/new_new_tab.html
@@ -43,7 +43,6 @@ function registerCallback(name) {
   global[name] = f;
 }
 
-chrome.send('getShownSections');
 chrome.send('getMostVisited');
 chrome.send('getRecentlyClosedTabs');
 chrome.send('getTips');
@@ -55,12 +54,112 @@ registerCallback('syncMessageChanged');
 registerCallback('tips');
 
 </script>
+<!-- template data placeholder -->
 <link rel="stylesheet" href="new_new_tab.css">
 <script>
+
+/**
+ * Bitmask for the different UI sections.
+ * This matches the Section enum in ../dom_ui/shown_sections_handler.h
+ * @enum {number}
+ */
+var Section = {
+  THUMB: 1,
+  LIST: 2,
+  RECENT: 4
+};
+
+var shownSections = templateData['shown_sections'];
+
+function $(id) {
+  return document.getElementById(id);
+}
+
 // Until themes can clear the cache, force-reload the theme stylesheet.
 document.write('<link id="themecss" rel="stylesheet" ' +
                'href="chrome://theme/css/newtab.css?' +
                (new Date()).getTime() + '">');
+
+function useSmallGrid() {
+  return window.innerWidth <= 920;
+}
+
+function isRtl() {
+  return templateData['textdirection'] == 'rtl';
+}
+
+function getMostVisitedLayoutRects() {
+  var small = useSmallGrid();
+
+  var cols = 4;
+  var rows = 2;
+  var marginWidth = 10;
+  var marginHeight = 7;
+  var borderWidth = 4;
+  var thumbWidth = small ? 150 : 207;
+  var thumbHeight = small ? 93 : 129;
+  var w = thumbWidth + 2 * borderWidth + 2 * marginWidth;
+  var h = thumbHeight + 40 + 2 * marginHeight;
+  var sumWidth = cols * w  - 2 * marginWidth;
+  // Since the list mode does not have a toolbar move it down a little to add
+  // some spacing at the top.
+  var LIST_TOP_SPACING = 22;
+
+  if (shownSections & Section.LIST) {
+    h = 34;
+    rows = 8;
+    cols = 1;
+  }
+
+  var rtl = isRtl();
+  var rects = [];
+
+  if (shownSections & Section.THUMB || shownSections & Section.LIST) {
+    for (var i = 0; i < rows * cols; i++) {
+      var row, col, left, top;
+      if (shownSections & Section.THUMB) {
+        row = Math.floor(i / cols);
+        col = i % cols;
+      } else {
+        col = Math.floor(i / rows);
+        row = i % rows;
+      }
+
+      if (shownSections & Section.THUMB) {
+        left = rtl ? sumWidth - col * w - thumbWidth - 2 * borderWidth :
+            col * w;
+      } else {
+        left = rtl ? sumWidth - col * w - w + 2 * marginWidth : col * w;
+      }
+      top = row * h;
+
+      if (shownSections & Section.LIST) {
+        top += LIST_TOP_SPACING;
+      }
+
+      rects[i] = {left: left, top: top};
+    }
+  }
+  return rects;
+}
+
+function applyMostVisitedRects() {
+  var isList = shownSections & Section.LIST;
+  if (shownSections & Section.THUMB || isList) {
+    var rects = getMostVisitedLayoutRects();
+    var rtlList = isRtl() && isList;
+    var children = $('most-visited').children;
+    for (var i = 0; i < 8; i++) {
+      var t = children[i];
+      t.style.left = rtlList ? '' : rects[i].left + 'px';
+      t.style.top = rects[i].top + 'px';
+      t.style.right = '';
+      var innerStyle = t.firstElementChild.style;
+      innerStyle.left = innerStyle.top = '';
+    }
+  }
+}
+
 </script>
 </head>
 <body class="loading"
@@ -84,6 +183,11 @@ document.write('<link id="themecss" rel="stylesheet" ' +
          i18n-content="restorethumbnails"></div>
   </div>
 
+  <script>
+    $('thumb-checkbox').checked = shownSections & Section.THUMB;
+    $('list-checkbox').checked = shownSections & Section.LIST;
+  </script>
+
   <div id="notification">
     <span>&nbsp;</span>
     <span class="link"><span class="link-color"></span></span>
@@ -105,120 +209,24 @@ document.write('<link id="themecss" rel="stylesheet" ' +
         <div></div>
       </div>
     </a>
+  </div>
 
-    <a class="thumbnail-container filler" tabindex="1" id="t1">
-      <div class="edit-mode-border">
-        <div class="edit-bar">
-          <div class="pin"></div>
-          <div class="spacer"></div>
-          <div class="remove"></div>
-        </div>
-        <span class="thumbnail-wrapper">
-          <span class="thumbnail"></span>
-        </span>
-      </div>
-      <div class="title">
-        <div></div>
-      </div>
-    </a>
-
-    <a class="thumbnail-container filler" tabindex="1" id="t2">
-      <div class="edit-mode-border">
-        <div class="edit-bar">
-          <div class="pin"></div>
-          <div class="spacer"></div>
-          <div class="remove"></div>
-        </div>
-        <span class="thumbnail-wrapper">
-          <span class="thumbnail"></span>
-        </span>
-      </div>
-      <div class="title">
-        <div></div>
-      </div>
-    </a>
-
-    <a class="thumbnail-container filler" tabindex="1" id="t3">
-      <div class="edit-mode-border">
-        <div class="edit-bar">
-          <div class="pin"></div>
-          <div class="spacer"></div>
-          <div class="remove"></div>
-        </div>
-        <span class="thumbnail-wrapper">
-          <span class="thumbnail"></span>
-        </span>
-      </div>
-      <div class="title">
-        <div></div>
-      </div>
-    </a>
-
-    <a class="thumbnail-container filler" tabindex="1" id="t4">
-      <div class="edit-mode-border">
-        <div class="edit-bar">
-          <div class="pin"></div>
-          <div class="spacer"></div>
-          <div class="remove"></div>
-        </div>
-        <span class="thumbnail-wrapper">
-          <span class="thumbnail"></span>
-        </span>
-      </div>
-      <div class="title">
-        <div></div>
-      </div>
-    </a>
-
-    <a class="thumbnail-container filler" tabindex="1" id="t5">
-      <div class="edit-mode-border">
-        <div class="edit-bar">
-          <div class="pin"></div>
-          <div class="spacer"></div>
-          <div class="remove"></div>
-        </div>
-        <span class="thumbnail-wrapper">
-          <span class="thumbnail"></span>
-        </span>
-      </div>
-      <div class="title">
-        <div></div>
-      </div>
-    </a>
-
-    <a class="thumbnail-container filler" tabindex="1" id="t6">
-      <div class="edit-mode-border">
-        <div class="edit-bar">
-          <div class="pin"></div>
-          <div class="spacer"></div>
-          <div class="remove"></div>
-        </div>
-        <span class="thumbnail-wrapper">
-          <span class="thumbnail"></span>
-        </span>
-      </div>
-      <div class="title">
-        <div></div>
-      </div>
-    </a>
+  <script>
+    (function() {
+      var el = $('most-visited');
+      if (shownSections & Section.LIST) {
+        el.className += ' list';
+      } else if (!(shownSections & Section.THUMB)) {
+        el.className += ' collapsed';
+      }
 
-    <a class="thumbnail-container filler" tabindex="1" id="t7">
-      <div class="edit-mode-border">
-        <div class="edit-bar">
-          <div class="pin"></div>
-          <div class="spacer"></div>
-          <div class="remove"></div>
-        </div>
-        <span class="thumbnail-wrapper">
-          <span class="thumbnail"></span>
-        </span>
-      </div>
-      <div class="title">
-        <div></div>
-      </div>
-    </a>
+      for (var i = 1; i < 8; i++) {
+        el.appendChild(el.firstElementChild.cloneNode(true)).id = 't' + i;
+      }
 
-  </div>
+      applyMostVisitedRects();
+    })();
+  </script>
 
   <div id="recently-closed">
     <h2 i18n-content="recentlyclosed"></h2>
@@ -227,6 +235,11 @@ document.write('<link id="themecss" rel="stylesheet" ' +
           i18n-content="viewfullhistory"></a>
     </span>
   </div>
+  <script>
+    if (!(shownSections & Section.RECENT)) {
+      $('recently-closed').className = 'collapsed';
+    }
+  </script>
 
   <div id="sync-status">
     <h2></h2>
@@ -257,6 +270,7 @@ document.write('<link id="themecss" rel="stylesheet" ' +
 <div class="window-menu" id="window-tooltip"></div>
 
 </body>
+<script src="i18n_template.js"></script>
 <script src="local_strings.js"></script>
 <script src="new_new_tab.js"></script>
 </html>
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index 7c98c21..42619f4 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -1,10 +1,6 @@
 
 // Helpers
 
-function $(id) {
-  return document.getElementById(id);
-}
-
 // TODO(arv): Remove these when classList is available in HTML5.
 // https://bugs.webkit.org/show_bug.cgi?id=20709
 function hasClass(el, name) {
@@ -68,7 +64,6 @@ function bind(fn, selfObj, var_args) {
 var loading = true;
 var mostVisitedData = [];
 var gotMostVisited = false;
-var gotShownSections = false;
 
 function mostVisitedPages(data, firstRun) {
   logEvent('received most visited pages');
@@ -189,11 +184,7 @@ function onShownSections(mask) {
 
     mostVisited.updateDisplayMode();
     renderRecentlyClosed();
-    updateOptionMenu();
   }
-
-  gotShownSections = true;
-  onDataLoaded();
 }
 
 function saveShownSections() {
@@ -275,10 +266,6 @@ function chromeSend(name, params, callbackName, callback) {
   chrome.send(name, params);
 }
 
-function useSmallGrid() {
-  return window.innerWidth <= 920;
-}
-
 var LayoutMode = {
   SMALL: 1,
   NORMAL: 2
@@ -302,19 +289,6 @@ function handleWindowResize() {
   }
 }
 
-/**
- * Bitmask for the different UI sections.
- * This matches the Section enum in ../dom_ui/shown_sections_handler.h
- * @enum {number}
- */
-var Section = {
-  THUMB: 1,
-  LIST: 2,
-  RECENT: 4
-};
-
-var shownSections = Section.THUMB | Section.RECENT;
-
 function showSection(section) {
   if (!(section & shownSections)) {
     shownSections |= section;
@@ -332,7 +306,6 @@ function showSection(section) {
       renderRecentlyClosed();
     }
 
-    updateOptionMenu();
     mostVisited.updateDisplayMode();
     mostVisited.layout();
   }
@@ -350,7 +323,6 @@ function hideSection(section) {
       renderRecentlyClosed();
     }
 
-    updateOptionMenu();
     mostVisited.updateDisplayMode();
     mostVisited.layout();
   }
@@ -508,13 +480,16 @@ var mostVisited = {
       thumbCheckbox.checked = true;
       listCheckbox.checked = false;
       removeClass(mostVisitedElement, 'list');
+      removeClass(mostVisitedElement, 'collapsed');
     } else if (shownSections & Section.LIST) {
       thumbCheckbox.checked = false;
       listCheckbox.checked = true;
       addClass(mostVisitedElement, 'list');
+      removeClass(mostVisitedElement, 'collapsed');
     } else {
       thumbCheckbox.checked = false;
       listCheckbox.checked = false;
+      addClass(mostVisitedElement, 'collapsed');
     }
   },
 
@@ -522,7 +497,6 @@ var mostVisited = {
 
   invalidate: function() {
     this.dirty_ = true;
-    this.calculationsDirty_ = true;
   },
 
   layout: function() {
@@ -531,137 +505,40 @@ var mostVisited = {
     }
     var d0 = Date.now();
 
-    this.calculateLayout_();
-
     var mostVisitedElement = $('most-visited');
     var thumbnails = mostVisitedElement.children;
+    var collapsed = false;
 
     if (shownSections & Section.LIST) {
       addClass(mostVisitedElement, 'list');
     } else if (shownSections & Section.THUMB) {
       removeClass(mostVisitedElement, 'list');
+    } else {
+      collapsed = true;
     }
 
-    var cache = this.layoutCache_;
-    mostVisitedElement.style.height = cache.sumHeight + 'px';
-    mostVisitedElement.style.opacity = cache.opacity;
     // We set overflow to hidden so that the most visited element does not
     // "leak" when we hide and show it.
-    if (!cache.opacity) {
+    if (collapsed) {
       mostVisitedElement.style.overflow = 'hidden';
     }
 
-    if (shownSections & Section.THUMB || shownSections & Section.LIST) {
-      for (var i = 0; i < thumbnails.length; i++) {
-        var t = thumbnails[i];
-
-        // Remove temporary ID that was used during startup layout.
-        t.id = '';
-
-        var rect = cache.rects[i];
-        t.style.left = rect.left + 'px';
-        t.style.top = rect.top + 'px';
-        t.style.width = rect.width != undefined ? rect.width + 'px' : '';
-        var innerStyle = t.firstElementChild.style;
-        innerStyle.left = innerStyle.top = '';
-      }
-    }
+    applyMostVisitedRects();
 
-    afterTransition(function() {
-      // Only set overflow to visible if the element is shown.
-      if (cache.opacity) {
+    // Only set overflow to visible if the element is shown.
+    if (!collapsed) {
+      afterTransition(function() {
         mostVisitedElement.style.overflow = '';
-      }
-    });
+      });
+    }
 
     this.dirty_ = false;
 
     logEvent('mostVisited.layout: ' + (Date.now() - d0));
   },
 
-  layoutCache_: {},
-  calculationsDirty_: true,
-
-  /**
-   * Calculates and caches the layout positions for the thumbnails.
-   */
-  calculateLayout_: function() {
-    if (!this.calculationsDirty_) {
-      return;
-    }
-
-    var small = useSmallGrid();
-
-    var cols = 4;
-    var rows = 2;
-    var marginWidth = 10;
-    var marginHeight = 7;
-    var borderWidth = 4;
-    var thumbWidth = small ? 150 : 207;
-    var thumbHeight = small ? 93 : 129;
-    var w = thumbWidth + 2 * borderWidth + 2 * marginWidth;
-    var h = thumbHeight + 40 + 2 * marginHeight;
-    var sumWidth = cols * w  - 2 * marginWidth;
-    var sumHeight = rows * h;
-    var opacity = 1;
-    // Since the list mode does not have a toolbar move it down a little to add
-    // some spacing at the top.
-    var LIST_TOP_SPACING = 22;
-
-    if (shownSections & Section.LIST) {
-      w = sumWidth;
-      h = 34;
-      rows = 8;
-      cols = 1;
-      sumHeight = rows * h + LIST_TOP_SPACING;
-    } else if (!(shownSections & Section.THUMB)) {
-      sumHeight = 0;
-      opacity = 0;
-    }
-
-    var rtl = document.documentElement.dir == 'rtl';
-    var rects = [];
-
-    if (shownSections & Section.THUMB || shownSections & Section.LIST) {
-      for (var i = 0; i < rows * cols; i++) {
-        var row, col, left, top, width;
-        if (shownSections & Section.THUMB) {
-          row = Math.floor(i / cols);
-          col = i % cols;
-        } else {
-          col = Math.floor(i / rows);
-          row = i % rows;
-        }
-
-        if (shownSections & Section.THUMB) {
-          left = rtl ? sumWidth - col * w - thumbWidth - 2 * borderWidth :
-              col * w;
-        } else {
-          left = rtl ? sumWidth - col * w - w + 2 * marginWidth : col * w;
-        }
-        top = row * h;
-
-        if (shownSections & Section.LIST) {
-          width = w;
-          top += LIST_TOP_SPACING;
-        }
-
-        rects[i] = {left: left, top: top, width: width};
-      }
-    }
-
-    this.layoutCache_ = {
-      opacity: opacity,
-      sumHeight: sumHeight,
-      rects: rects
-    }
-
-    this.calculationsDirty_ = false;
-  },
-
   getRectByIndex: function(index) {
-    this.calculateLayout_();
-    return this.layoutCache_.rects[index]
+    return getMostVisitedLayoutRects()[index];
   }
 };
 
@@ -673,9 +550,9 @@ function layoutRecentlyClosed() {
   var style = recentElement.style;
 
   if (!recentShown) {
-    style.opacity = style.height = 0;
+    addClass(recentElement, 'collapsed');
   } else {
-    style.opacity = style.height = '';
+    removeClass(recentElement, 'collapsed');
 
     // We cannot use clientWidth here since the width has a transition.
     var spacing = 20;
@@ -792,7 +669,7 @@ function formatTabsText(numTabs) {
  * @return {boolean}
  */
 function onDataLoaded() {
-  if (gotMostVisited && gotShownSections) {
+  if (gotMostVisited) {
     mostVisited.layout();
     loading = false;
     // Remove class name in a timeout so that changes done in this JS thread are
@@ -959,6 +836,7 @@ function OptionMenu(button, menu) {
 
 OptionMenu.prototype = {
   show: function() {
+    updateOptionMenu();
     this.menu.style.display = 'block';
     addClass(this.button, 'open');
     this.button.focus();
@@ -1558,6 +1436,8 @@ var dnd = {
     y = Math.min(y, document.body.clientHeight - rect.top - item.offsetHeight -
                  2);
 
+    // Override right in case of RTL.
+    item.style.right = 'auto';
     item.style.left = x + 'px';
     item.style.top = y + 'px';
     item.style.zIndex = 2;
-- 
cgit v1.1