Skip to content

GitLab

T
tangled
Commit 00f358ab authored by Kristi Park's avatar Kristi Park Committed by Commit Bot
Browse files
Options

[NTP] Remove old Most Visited section styling 

The Material Design style introduced in M69 is now default.

Bug: 893362
Change-Id: I17049cfb6b1c2b61aef2edd221645d77b5297fca
Reviewed-on: https://chromium-review.googlesource.com/c/1313868
Commit-Queue: Kristi Park <kristipark@chromium.org>
Reviewed-by: default avatarRamya Nagarajan <ramyan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#612024}
parent 5f8761dd
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 35 additions and 582 deletions
chrome/browser/resources/local_ntp/most_visited_single.css
View file @ 00f358ab
......@@ -23,12 +23,6 @@ html {
--md-title-height: 24px;
/* Constants. */
--tile-height: 128px;
--tile-margin: 16px;
--tile-width: 154px;
--title-height: 32px;
/* May be overridden by themes (on the body element). */
--tile-title-color: #323232;
}
......@@ -55,333 +49,36 @@ a:visited {
}
#most-visited {
margin: 0;
margin: 10px 0;
text-align: -webkit-center;
user-select: none;
}
.md #most-visited {
margin: 10px 0;
width: 100%
}
#mv-tiles,
.mv-tiles-old {
font-size: 0;
/* Two rows of tiles of 128px each, and 16px of spacing between the rows.
* If you change this, also change the corresponding values in
* local_ntp.css. */
height: calc(2*var(--tile-height) + var(--tile-margin));
line-height: calc(var(--tile-height) + var(--tile-margin));
margin: 4px 0 8px 0;
opacity: 0;
position: absolute;
/* This align correctly for both LTR and RTL */
text-align: -webkit-auto;
transition: opacity 1s;
user-select: none;
}
.md #mv-tiles,
.md .mv-tiles-old {
display: flex;
flex-wrap: wrap;
height: auto;
font-size: 0;
justify-content: center;
line-height: normal;
margin: 0;
/* 5 88px tiles per row. If you change this, also change the corresponding
* values in local_ntp.css. */
max-width: calc(var(--md-tile-width) * var(--md-max-tiles-row));
opacity: 0;
position: static;
transition-duration: 300ms;
/* This align correctly for both LTR and RTL */
text-align: -webkit-auto;
transition: opacity 300ms;
user-select: none;
}
.md .mv-tiles-old {
.mv-tiles-old {
left: 0;
margin: auto;
position: absolute;
right: 0;
}
.mv-tile,
.mv-empty-tile {
border-radius: 2px;
box-sizing: border-box;
display: none;
font-family: arial, sans-serif;
font-size: 12px;
height: var(--tile-height);
line-height: 100%;
margin: 0 calc(var(--tile-margin) / 2);
opacity: 1;
position: relative;
vertical-align: top;
white-space: nowrap;
width: var(--tile-width);
}
/* Minimal layout: 2 columns; only first 4 tiles are visible. */
.mv-tile:nth-child(-n+4),
.mv-empty-tile:nth-child(-n+4) {
display: inline-block;
}
/* width >= (3 cols * (16px + 154px))
* 3 columns; first 6 tiles are visible. */
@media (min-width: 510px) {
.mv-tile:nth-child(-n+6),
.mv-empty-tile:nth-child(-n+6) {
display: inline-block;
}
}
/* width >= (4 cols * (16px + 154px))
* 4 columns; first 8 tiles are visible. */
@media (min-width: 680px) {
.mv-tile:nth-child(-n+8),
.mv-empty-tile:nth-child(-n+8) {
display: inline-block;
}
}
.mv-tile {
background: rgb(250,250,250);
}
.mv-empty-tile {
background: rgb(245,245,245);
}
body.dark-theme .mv-tile,
body.dark-theme .mv-empty-tile {
background: rgb(51,51,51);
}
.mv-tile {
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
cursor: pointer;
transition-duration: 200ms;
transition-property: transform, box-shadow, margin, opacity, width;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.mv-tile:hover:not(:active),
.mv-tile:focus-within:not(:active) {
box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
}
.mv-tile:focus,
.mv-tile:focus-within {
filter: brightness(92%);
}
.mv-tile:active {
box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.12);
filter: brightness(88%);
}
.mv-tile.blacklisted {
margin: 0;
transform: scale(0, 0);
width: 0;
}
.mv-title {
height: 15px;
left: 31px;
line-height: 14px;
overflow: hidden;
padding: 0;
position: absolute;
text-overflow: ellipsis;
top: 9px;
width: 120px;
}
.mv-title.multiline {
white-space: pre-wrap;
word-wrap: break-word;
}
html:not([dir=rtl]) .mv-title[style*='direction: rtl'] {
-webkit-mask-image:
linear-gradient(to left, black, black, 100px, transparent);
left: auto;
right: 8px;
text-align: right;
}
html[dir=rtl] .mv-title {
left: 8px;
text-align: left;
}
html[dir=rtl] .mv-title[style*='direction: rtl'] {
-webkit-mask-image:
linear-gradient(to left, black, black, 100px, transparent);
right: 31px;
text-align: right;
}
.mv-thumb {
border-radius: 0 0 2px 2px;
cursor: pointer;
display: block;
height: calc(var(--tile-height) - var(--title-height));
overflow: hidden;
position: absolute;
top: var(--title-height);
width: var(--tile-width);
}
.mv-thumb img {
height: auto;
min-height: 100%;
width: 100%;
}
.mv-thumb.failed-img {
background-color: rgb(245,245,245);
}
body.dark-theme .mv-thumb.failed-img {
background-color: #555;
}
/* We use ::after without content to provide an additional element on top of the
* thumbnail. */
.mv-thumb.failed-img::after {
border: 8px solid rgb(215,215,215);
border-radius: 50%;
content: '';
display: block;
height: 0;
margin: 39px 66px;
width: 0;
}
body.dark-theme .mv-thumb.failed-img::after {
border-color: #333;
}
.mv-x {
background: linear-gradient(to left, rgb(250,250,250) 60%, transparent);
border: none;
cursor: pointer;
height: var(--title-height);
opacity: 0;
padding: 0;
position: absolute;
right: 0;
transition: opacity 150ms;
width: 40px;
}
body.dark-theme .mv-x {
background: linear-gradient(to left, rgb(51,51,51) 60%, transparent);
}
/* We use ::after without content to provide the masked X element. The "bottom"
* div is actually just the gradient. */
.mv-x::after {
--mask-offset: calc((var(--title-height) - var(--mask-width)) / 2);
--mask-width: 10px;
-webkit-mask-image: -webkit-image-set(
url(chrome-search://local-ntp/images/close_3_mask.png) 1x,
url(chrome-search://local-ntp/images/close_3_mask.png@2x) 2x);
-webkit-mask-position: var(--mask-offset) var(--mask-offset);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: var(--mask-width);
background-color: rgba(90,90,90,0.7);
content: '';
display: block;
height: var(--title-height);
position: absolute;
right: 0;
top: 0;
width: var(--title-height);
}
body.dark-theme .mv-x.mv-x::after {
background-color: rgba(255,255,255,0.7);
}
html[dir=rtl] .mv-x {
background: linear-gradient(to right, rgb(250,250,250) 60%, transparent);
left: -1px;
right: auto;
}
body.dark-theme body.dark-theme .mv-x {
background: linear-gradient(to right, rgb(51,51,51) 60%, transparent);
}
html[dir=rtl] .mv-x::after {
left: -1px;
right: auto;
}
.mv-x:hover::after {
background-color: rgb(90,90,90);
}
body.dark-theme .mv-x:hover::after {
background-color: #fff;
}
.mv-x:active::after {
background-color: rgb(66,133,244);
}
body.dark-theme .mv-x:active::after {
background-color: rgba(255,255,255,0.5);
}
.mv-tile:hover .mv-x,
.mv-tile:focus .mv-x {
opacity: 1;
transition-delay: 500ms;
}
.mv-x:hover,
.mv-x:focus {
opacity: 1;
transition: none;
}
.mv-favicon {
background-size: 16px;
height: 16px;
left: 7px;
margin: 0;
pointer-events: none;
position: absolute;
top: 8px;
width: 16px;
}
html[dir=rtl] .mv-favicon {
left: auto;
right: 7px;
}
.mv-favicon.failed-favicon {
background-image: -webkit-image-set(
url(chrome-search://local-ntp/images/ntp_default_favicon.png) 1x,
url(chrome-search://local-ntp/images/ntp_default_favicon.png@2x) 2x);
background-repeat: no-repeat;
background-size: 16px 16px;
}
.mv-favicon img {
height: 100%;
width: 100%;
}
.mv-favicon.failed-favicon img {
display: none;
}
.mouse-navigation {
outline: none;
}
......
chrome/browser/ui/search/local_ntp_browsertest.cc
View file @ 00f358ab
......@@ -426,8 +426,7 @@ IN_PROC_BROWSER_TEST_F(LocalNTPTest, GoogleNTPLoadsWithoutError) {
histograms.ExpectBucketCount("NewTabPage.SuggestionsImpression", 0, 1);
histograms.ExpectTotalCount("NewTabPage.SuggestionsImpression.client", 1);
// The material design NTP shouldn't have any thumbnails.
histograms.ExpectTotalCount("NewTabPage.SuggestionsImpression.Thumbnail",
features::IsMDIconsEnabled() ? 0 : 1);
histograms.ExpectTotalCount("NewTabPage.SuggestionsImpression.Thumbnail", 0);
histograms.ExpectTotalCount("NewTabPage.TileTitle", 1);
histograms.ExpectTotalCount("NewTabPage.TileTitle.client", 1);
histograms.ExpectTotalCount("NewTabPage.TileType", 1);
......@@ -479,8 +478,7 @@ IN_PROC_BROWSER_TEST_F(LocalNTPTest, NonGoogleNTPLoadsWithoutError) {
histograms.ExpectBucketCount("NewTabPage.SuggestionsImpression", 0, 1);
histograms.ExpectTotalCount("NewTabPage.SuggestionsImpression.client", 1);
// The material design NTP shouldn't have any thumbnails.
histograms.ExpectTotalCount("NewTabPage.SuggestionsImpression.Thumbnail",
features::IsMDIconsEnabled() ? 0 : 1);
histograms.ExpectTotalCount("NewTabPage.SuggestionsImpression.Thumbnail", 0);
histograms.ExpectTotalCount("NewTabPage.TileTitle", 1);
histograms.ExpectTotalCount("NewTabPage.TileTitle.client", 1);
histograms.ExpectTotalCount("NewTabPage.TileType", 1);
......@@ -564,12 +562,8 @@ IN_PROC_BROWSER_TEST_F(LocalNTPMDTest, LoadsMDIframe) {
// Get the iframe and check that the tiles loaded correctly.
content::RenderFrameHost* iframe = GetMostVisitedIframe(active_tab);
// Get the total number of (non-empty) tiles from the iframe and tiles with
// thumbnails. There should be no thumbnails in Material Design.
int total_thumbs = 0;
// Get the total number of (non-empty) tiles from the iframe.
int total_favicons = 0;
ASSERT_TRUE(instant_test_utils::GetIntFromJS(
iframe, "document.querySelectorAll('.mv-thumb').length", &total_thumbs));
ASSERT_TRUE(instant_test_utils::GetIntFromJS(
iframe, "document.querySelectorAll('.md-favicon').length",
&total_favicons));
......@@ -591,8 +585,7 @@ IN_PROC_BROWSER_TEST_F(LocalNTPMDTest, LoadsMDIframe) {
// Since we're in a non-signed-in, fresh profile with no history, there should
// be the default TopSites tiles (see history::PrepopulatedPage).
// Check that there is at least one tile, and that all of them loaded their
// images successfully. Also check that no thumbnails have loaded.
EXPECT_EQ(total_thumbs, 0);
// images successfully.
EXPECT_EQ(total_favicons, succeeded_favicons);
EXPECT_EQ(0, failed_favicons);
}
......@@ -830,50 +823,4 @@ IN_PROC_BROWSER_TEST_F(LocalNTPTest, InterstitialsAreNotNTPs) {
EXPECT_TRUE(search::IsInstantNTP(active_tab));
}
class LocalNTPNonMDTest : public LocalNTPTest {
public:
LocalNTPNonMDTest()
: LocalNTPTest(
/*enabled_features=*/{features::kUseGoogleLocalNtp},
/*disabled_features=*/{
features::kNtpUIMd, features::kNtpBackgrounds,
features::kNtpIcons, ntp_tiles::kNtpCustomLinks}) {}
};
IN_PROC_BROWSER_TEST_F(LocalNTPNonMDTest, LoadsNonMDIframe) {
content::WebContents* active_tab =
local_ntp_test_utils::OpenNewTab(browser(), GURL("about:blank"));
local_ntp_test_utils::NavigateToNTPAndWaitUntilLoaded(browser());
// Get the iframe and check that the tiles loaded correctly.
content::RenderFrameHost* iframe = GetMostVisitedIframe(active_tab);
// Get the total number of (non-empty) tiles from the iframe.
int total_thumbs = 0;
ASSERT_TRUE(instant_test_utils::GetIntFromJS(
iframe, "document.querySelectorAll('.mv-thumb').length", &total_thumbs));
// Also get how many of the tiles succeeded and failed in loading their
// thumbnail images.
int succeeded_imgs = 0;
ASSERT_TRUE(instant_test_utils::GetIntFromJS(
iframe, "document.querySelectorAll('.mv-thumb img').length",
&succeeded_imgs));
int failed_imgs = 0;
ASSERT_TRUE(instant_test_utils::GetIntFromJS(
iframe, "document.querySelectorAll('.mv-thumb.failed-img').length",
&failed_imgs));
// First, sanity check that the numbers line up (none of the css classes was
// renamed, etc).
EXPECT_EQ(total_thumbs, succeeded_imgs + failed_imgs);
// Since we're in a non-signed-in, fresh profile with no history, there should
// be the default TopSites tiles (see history::PrepopulatedPage).
// Check that there is at least one tile, and that all of them loaded their
// images successfully.
EXPECT_GT(total_thumbs, 0);
EXPECT_EQ(total_thumbs, succeeded_imgs);
EXPECT_EQ(0, failed_imgs);
}
} // namespace
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