Commit 4e973584 authored by Weilun Shi's avatar Weilun Shi Committed by Commit Bot

[NTP] pill under MD icons text only show on theme

Create a new class use-theme for the most-visited iframe to
differentiate whether is custom-background or use theme. Apply pill
under MD icons text only on when using theme but not for the
custom-background.

Screenshot:
https://screenshot.googleplex.com/Et8oFFtMgXb.png
https://screenshot.googleplex.com/ix4meSKVW5W.png

Bugs: 850718
Change-Id: I9416a44d9e2fc3dfd64fcf4198139d1f388ae9c3
Reviewed-on: https://chromium-review.googlesource.com/1156062
Commit-Queue: Weilun Shi <sweilun@chromium.org>
Reviewed-by: default avatarKristi Park <kristipark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#579649}
parent 9bbdeeff
......@@ -359,6 +359,8 @@ function sendThemeInfoToMostVisitedIframe() {
var message = {cmd: 'updateTheme'};
message.isThemeDark = isThemeDark;
message.isUsingTheme =
!info.customBackgroundConfigured && !info.usingDefaultTheme;
var titleColor = NTP_DESIGN.titleColor;
if (!info.usingDefaultTheme && info.textColorRgba) {
......
......@@ -485,13 +485,6 @@ body.dark-theme .md-tile:active .md-menu::after {
width: var(--md-favicon-size);
}
.md-title-container {
background-color: white;
border-radius: 12px;
height: 24px;
padding: 4px;
}
.md-title {
color: rgba(33, 32, 36, 0.86);
font-family: 'Roboto', arial, sans-serif;
......@@ -499,15 +492,31 @@ body.dark-theme .md-tile:active .md-menu::after {
font-weight: 500;
height: var(--md-title-height);
line-height: var(--md-title-height);
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
width: 96px;
word-break: break-word;
word-wrap: break-word;
}
/* Apply when a custom background is set */
body.dark-theme .md-title {
color: rgb(248, 249, 250);
text-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
}
/* Apply only when a theme is installed */
body.using-theme .md-title-container {
background-color: white;
border-radius: 12px;
height: 24px;
padding: 4px;
}
body.using-theme .md-title {
color: rgba(33, 32, 36, 0.86);
text-shadow: unset;
}
.md-menu {
background-color: transparent;
border: none;
......
......@@ -276,6 +276,7 @@ var showTiles = function(info) {
var updateTheme = function(info) {
document.body.style.setProperty('--tile-title-color', info.tileTitleColor);
document.body.classList.toggle('dark-theme', info.isThemeDark);
document.body.classList.toggle('using-theme', info.isUsingTheme);
};
......@@ -345,6 +346,10 @@ var swapInNewTiles = function() {
// If this is Material Design, re-balance the tiles if there are more than
// |MD_MAX_TILES_PER_ROW| in order to make even rows.
if (isMDEnabled) {
// Called after appending to document so that css styles are active.
truncateTitleText(
parent.lastChild.querySelectorAll('.' + CLASSES.MD_TITLE));
if (cur.childNodes.length > MD_MAX_TILES_PER_ROW) {
cur.style.maxWidth =
'calc(var(--md-tile-width) * ' + Math.ceil(cur.childNodes.length / 2);
......@@ -363,6 +368,25 @@ var swapInNewTiles = function() {
tiles = document.createElement('div');
};
/**
* Truncates titles that are longer than one line and appends an ellipsis. Text
* overflow in CSS ("text-overflow: ellipsis") requires "overflow: hidden",
* which will cut off the title's text shadow. Only used for Material Design
* tiles.
*/
function truncateTitleText(titles) {
for (let i = 0; i < titles.length; i++) {
let el = titles[i];
const originalTitle = el.innerText;
let truncatedTitle = el.innerText;
while (el.scrollHeight > el.offsetHeight && truncatedTitle.length > 0) {
el.innerText = (truncatedTitle = truncatedTitle.slice(0, -1)) + '...';
}
if (truncatedTitle.length === 0) {
console.error('Title truncation failed: ' + originalTitle);
}
}
}
/**
* Handler for the 'show' message from the host page, called when it wants to
......
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