Skip to content

GitLab

T
tangled
Commit 8587d48a authored by arv@google.com's avatar arv@google.com
Browse files
Options

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
parent 62b1b93a
Hide whitespace changes
Inline Side-by-side
Showing with 115 additions and 66 deletions
chrome/browser/resources/new_new_tab.css
View file @ 8587d48a
......@@ -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
View file @ 8587d48a
......@@ -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
View file @ 8587d48a
......@@ -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,31 +213,29 @@ 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();
}
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();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment