Local NTP: prevent tiles from reloading on resize by moving them into single <div>.
Tiles in chrome-search://local-ntp/local-ntp.html used to be arranged in
2 rows, and get reshuffled when screen resize causes number of columns
to change. However, detaching and reattaching elements with <iframe>s
cause the <iframe>s to reload, resulting in flickering.
This CL places all tiles in a single <div>, so no reshuffling is needed.
Instead, if number of columns change we resize the container width (and
also hide tiles beyond row 2), and let HTML layout place handle the
proper wrapping.
On blacklisting, we cannot compare identities between old tiles and new,
so a reload is necessary, which leads to some flickering.
Also tested for <body dir="RTL">
Additional cleanups:
- To show all tiles only after everything is loaded: using a Barrier
counter instead of looping on every load, which was O(n^2).
- Broke apart onMostVisitedChange() and added more comments.
- Removed unused CSS for fakebox and tiles resizing (JS does resizing now).
- Using CSS visibility instead of hidden to show #mv-tiles, so it take
up space and prevent content beneath tiles from jumping up briefly.
- Refactoring the logic to hide tiles during load and show all at once when
everything loads (or timeout occurs). Using new class Barrier to do this.
BUG=399388
Review URL: https://codereview.chromium.org/412073002
git-svn-id: svn://svn.chromium.org/chrome/trunk/src@287120 0039d316-1c4b-4281-b951-d872f2087c98
diff --git a/chrome/browser/browser_resources.grd b/chrome/browser/browser_resources.grd
index b79ec4d..2a94210 100644
--- a/chrome/browser/browser_resources.grd
+++ b/chrome/browser/browser_resources.grd
@@ -205,6 +205,7 @@
<include name="IDR_LOCAL_NTP_HTML" file="resources\local_ntp\local_ntp.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
<include name="IDR_LOCAL_NTP_CSS" file="resources\local_ntp\local_ntp.css" type="BINDATA" />
<include name="IDR_LOCAL_NTP_JS" file="resources\local_ntp\local_ntp.js" flattenhtml="true" type="BINDATA" />
+ <include name="IDR_LOCAL_NTP_UTIL_JS" file="resources\local_ntp\local_ntp_util.js" flattenhtml="true" type="BINDATA" />
<include name="IDR_MOST_VISITED_IFRAME_CSS" file="resources\local_ntp\most_visited_iframe.css" type="BINDATA" />
<include name="IDR_MOST_VISITED_TITLE_HTML" file="resources\local_ntp\most_visited_title.html" type="BINDATA" />
<include name="IDR_MOST_VISITED_TITLE_CSS" file="resources\local_ntp\most_visited_title.css" type="BINDATA" />
