NTP: Fix startup visual state ...

chrome/browser/resources/new_new_tab.js

 
 // 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) {
   return el.nodeType == 1 && el.className.split(/\s+/).indexOf(name) != -1;
 }
 
 function addClass(el, name) {
   el.className += ' ' + name;
 }
 
@@ skipping 43 matching lines @@
   return function() {
     var args = Array.prototype.slice.call(arguments);
     args.unshift.apply(args, boundArgs);
     return fn.apply(selfObj, args);
   }
 }
 
 var loading = true;
 var mostVisitedData = [];
 var gotMostVisited = false;
-var gotShownSections = false;
 
 function mostVisitedPages(data, firstRun) {
   logEvent('received most visited pages');
 
   // We append the class name with the "filler" so that we can style fillers
   // differently.
   var maxItems = 8;
   data.length = Math.min(maxItems, data.length);
   var len = data.length;
   for (var i = len; i < maxItems; i++) {
@@ skipping 100 matching lines @@
     shownSections = mask;
 
     // Only invalidate most visited if needed.
     if ((mask & Section.THUMB) != (oldShownSections & Section.THUMB) ||
         (mask & Section.LIST) != (oldShownSections & Section.LIST)) {
       mostVisited.invalidate();
     }
 
     mostVisited.updateDisplayMode();
     renderRecentlyClosed();
-    updateOptionMenu();
   }
-
-  gotShownSections = true;
-  onDataLoaded();
 }
 
 function saveShownSections() {
   chrome.send('setShownSections', [String(shownSections)]);
 }
 
 function getThumbnailClassName(data) {
   return 'thumbnail-container' +
       (data.pinned ? ' pinned' : '') +
       (data.filler ? ' filler' : '');
@@ skipping 61 matching lines @@
   global[callbackName] = function() {
     // restore
     global[callbackName] = old;
 
     var args = Array.prototype.slice.call(arguments);
     return callback.apply(global, args);
   };
   chrome.send(name, params);
 }
 
-function useSmallGrid() {
-  return window.innerWidth <= 920;
-}
-
 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 oldLayoutMode = layoutMode;
   layoutMode = useSmallGrid() ? LayoutMode.SMALL : LayoutMode.NORMAL
 
   if (layoutMode != oldLayoutMode){
     mostVisited.invalidate();
     mostVisited.layout();
     renderRecentlyClosed();
   }
 }
 
-/**
- * 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;
 
     // THUMBS and LIST are mutually exclusive.
     if (section == Section.THUMB) {
       // hide LIST
       shownSections &= ~Section.LIST;
       mostVisited.invalidate();
     } else if (section == Section.LIST) {
       // hide THUMB
       shownSections &= ~Section.THUMB;
       mostVisited.invalidate();
     } else {
       renderRecentlyClosed();
     }
 
-    updateOptionMenu();
     mostVisited.updateDisplayMode();
     mostVisited.layout();
   }
 }
 
 function hideSection(section) {
   if (section & shownSections) {
     shownSections &= ~section;
 
     if (section & Section.THUMB || section & Section.LIST) {
       mostVisited.invalidate();
     }
 
     if (section & Section.RECENT) {
       renderRecentlyClosed();
     }
 
-    updateOptionMenu();
     mostVisited.updateDisplayMode();
     mostVisited.layout();
   }
 }
 
 var mostVisited = {
   addPinnedUrl_: function(data, index) {
     chrome.send('addPinnedURL', [data.url, data.title, data.faviconUrl || '',
                                  data.thumbnailUrl || '', String(index)]);
   },
@@ skipping 137 matching lines @@
     }
 
     var thumbCheckbox = $('thumb-checkbox');
     var listCheckbox = $('list-checkbox');
     var mostVisitedElement = $('most-visited');
 
     if (shownSections & Section.THUMB) {
       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');
     }
   },
 
   dirty_: false,
 
   invalidate: function() {
     this.dirty_ = true;
-    this.calculationsDirty_ = true;
   },
 
   layout: function() {
     if (!this.dirty_) {
       return;
     }
     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];
+    applyMostVisitedRects();
 
-        // 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 = '';
-      }
+    // Only set overflow to visible if the element is shown.
+    if (!collapsed) {
+      afterTransition(function() {
+        mostVisitedElement.style.overflow = '';
+      });
     }
 
-    afterTransition(function() {
-      // Only set overflow to visible if the element is shown.
-      if (cache.opacity) {
-        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];
   }
 };
 
 // Recently closed
 
 function layoutRecentlyClosed() {
   var recentElement = $('recently-closed');
   var recentShown = shownSections & Section.RECENT;
   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;
     var headerEl = recentElement.firstElementChild;
     var navEl = recentElement.lastElementChild;
     var navWidth = navEl.offsetWidth;
     // Subtract 10 for the padding
     var availWidth = (useSmallGrid() ? 690 : 918) - navWidth - 10;
 
     // Now go backwards and hide as many elements as needed.
@@ skipping 95 matching lines @@
   if (numTabs == 1)
     return localStrings.getString('closedwindowsingle');
   return localStrings.formatString('closedwindowmultiple', numTabs);
 }
 
 /**
  * We need both most visited and the shown sections to be considered loaded.
  * @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
     // not animated.
     window.setTimeout(function() {
       removeClass(document.body, 'loading');
     }, 1);
   }
 }
 
@@ skipping 146 matching lines @@
   this.button.onkeydown = bind(this.handleKeyDown, this);
   this.boundHideMenu_ = bind(this.hide, this);
   this.boundMaybeHide_ = bind(this.maybeHide_, this);
   this.menu.onmouseover = bind(this.handleMouseOver, this);
   this.menu.onmouseout = bind(this.handleMouseOut, this);
   this.menu.onmouseup = bind(this.handleMouseUp, this);
 }
 
 OptionMenu.prototype = {
   show: function() {
+    updateOptionMenu();
     this.menu.style.display = 'block';
     addClass(this.button, 'open');
     this.button.focus();
 
     // Listen to document and window events so that we hide the menu when the
     // user clicks outside the menu or tabs away or the whole window is blurred.
     document.addEventListener('focus', this.boundMaybeHide_, true);
     document.addEventListener('mousedown', this.boundMaybeHide_, true);
   },
 
@@ skipping 579 matching lines @@
     // The position of the item is relative to #most-visited so we need to
     // subtract that when calculating the allowed position.
     x = Math.max(x, -rect.left);
     x = Math.min(x, document.body.clientWidth - rect.left - item.offsetWidth -
                  2);
     // The shadow is 2px
     y = Math.max(-rect.top, y);
     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;
   },
 
   // We listen to mousedown to get the relative position of the cursor for dnd.
   handleMouseDown: function(e) {
     var item = mostVisited.getItem(e.target);
     if (item) {
       this.startX = item.offsetLeft;
@@ skipping 112 matching lines @@
 function fixLinkUnderline(el) {
   var span = document.createElement('span');
   span.className = 'link-color';
   while (el.hasChildNodes()) {
     span.appendChild(el.firstChild);
   }
   el.appendChild(span);
 }
 
 updateAttribution();