Skip to content

GitLab

T
tangled
Commit 67a093ea authored by Gayane Petrosyan's avatar Gayane Petrosyan Committed by Commit Bot
Browse files
Options

Add default NTP font and make it platform specific. 

Add default NTP font and make it platform specific by setting font on
the document.body. Elements can further overwrite it if needed.

Bug: 867759
Change-Id: Ia9332ce0f768474ba33e7b7948f7b4596d2e3271
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1490450
Commit-Queue: Gayane Petrosyan <gayane@chromium.org>
Reviewed-by: default avatarKristi Park <kristipark@chromium.org>
Reviewed-by: default avatarKyle Milka <kmilka@chromium.org>
Cr-Commit-Position: refs/heads/master@{#638027}
parent 4a7757ad
Hide whitespace changes
Inline Side-by-side
Showing with 62 additions and 39 deletions
chrome/browser/resources/local_ntp/animations.css
View file @ 67a093ea
......@@ -47,7 +47,6 @@ html[darkmode=true] button.primary .ripple-effect {
button.paper {
border: none;
border-radius: 4px;
font-family: 'Roboto', arial, sans-serif;
font-size: 12px;
font-weight: 500;
height: 32px;
......
chrome/browser/resources/local_ntp/custom_backgrounds.css
View file @ 67a093ea
......@@ -137,7 +137,6 @@ html[dir=rtl] #edit-bg-dialog {
#edit-bg-title {
color: rgb(var(--GG900-rgb));
font-family: 'Roboto', arial, sans-serif;
font-size: 15px;
height: 30px;
padding: 16px 0 0 16px;
......@@ -157,7 +156,6 @@ html[darkmode=true] #edit-bg-title {
.bg-option {
color: rgb(var(--GG800-rgb));
font-family: 'Roboto', arial, sans-serif;
font-size: 13px;
height: 40px;
line-height: 40px;
......@@ -255,7 +253,6 @@ html[darkmode=true] #edit-bg-divider {
bottom: 0;
box-shadow: 0 1px 3px 0 rgba(var(--GG800-rgb), 0.3),
0 4px 8px 3px rgba(var(--GG800-rgb), 0.15);
font-family: 'Roboto', arial, sans-serif;
height: 400px;
padding: 0 0 0 0;
position: fixed;
......@@ -639,7 +636,6 @@ html[dir=rtl] .plus-icon {
border-radius: 8px;
bottom: 16px;
color: white;
font-family: 'Roboto', arial, sans-serif;
font-weight: 500;
left: 16px;
padding: 8px 8px 8px 8px;
......
chrome/browser/resources/local_ntp/custom_links_edit.css
View file @ 67a093ea
......@@ -17,7 +17,6 @@ body {
bottom: 0;
box-shadow: 0 1px 3px 0 rgba(var(--GG800-rgb), 0.3),
0 4px 8px 3px rgba(var(--GG800-rgb), 0.15);
font-family: 'Roboto', arial, sans-serif;
margin: auto;
min-width: 320px;
padding: 16px;
......@@ -41,7 +40,6 @@ html[darkmode=true] #edit-link-dialog {
#dialog-title {
color: rgb(var(--GG900-rgb));
font-family: 'Roboto', arial, sans-serif;
font-size: 15px;
line-height: 24px;
margin-bottom: 16px;
......@@ -76,7 +74,6 @@ input {
border-radius: 4px;
caret-color: rgb(var(--GB600-rgb));
color: rgb(var(--GG900-rgb));
font-family: 'Roboto', arial, sans-serif;
font-size: 13px;
height: 32px;
line-height: 24px;
......
chrome/browser/resources/local_ntp/custom_links_edit.html
View file @ 67a093ea
......@@ -7,7 +7,7 @@
<base target="_top">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="animations.css">
<link rel="stylesheet" type="text/css" href="constants.css">
<link rel="stylesheet" type="text/css" href="local-ntp-common.css">
<link rel="stylesheet" type="text/css" href="edit.css">
<script src="utils.js"></script>
<script src="animations.js"></script>
......
chrome/browser/resources/local_ntp/custom_links_edit.js
View file @ 67a093ea
......@@ -334,6 +334,8 @@ function init() {
$(IDS.URL_FIELD).addEventListener('input',
() => $(IDS.DONE).disabled = ($(IDS.URL_FIELD).value.trim() === ''));
utils.setPlatformClass(document.body);
$(IDS.EDIT_DIALOG).showModal();
window.addEventListener('message', handlePostMessage);
......
chrome/browser/resources/local_ntp/local_ntp.css
View file @ 67a093ea
......@@ -65,13 +65,10 @@ html[darkmode=true] body:not(.light-chip) {
}
}
/* TODO: Need to discuss with NTP folks before we remove font-family from the
* body tag. */
body {
background-attachment: fixed !important;
cursor: default;
display: none;
font-family: arial, sans-serif;
font-size: small;
margin: 0;
min-height: 100%;
......@@ -183,7 +180,6 @@ html[dir=rtl] #fakebox > input {
#fakebox-text {
bottom: 4px;
color: rgb(var(--GG600-rgb));
font-family: 'Roboto', arial, sans-serif;
font-size: 14px;
left: 0;
margin-top: 1px;
......@@ -395,7 +391,6 @@ html[darkmode=true] body:not(.light-chip) #mv-notice-x:active {
border: 1px solid rgb(var(--GG300-rgb));
/* Necessary for a "pill" shape. Using 50% creates an oval. */
border-radius: 16px;
font-family: 'Roboto', arial, sans-serif;
font-weight: normal;
height: fit-content;
margin: 0 auto;
......@@ -650,7 +645,6 @@ input:checked + .toggle::before {
border-radius: 16px;
color: rgb(var(--GR600-rgb));
display: flex;
font-family: 'Roboto', arial, sans-serif;
font-size: 12px;
font-weight: normal;
height: fit-content;
......@@ -756,7 +750,6 @@ html[darkmode=true] body:not(.light-chip) #error-notice-link:active {
box-sizing: border-box;
color: rgb(var(--GG700-rgb));
display: inline-block;
font-family: 'Roboto', arial, sans-serif;
font-size: 12px;
line-height: 32px;
margin-bottom: 0;
......
chrome/browser/resources/local_ntp/local_ntp.html
View file @ 67a093ea
......@@ -5,7 +5,7 @@
found in the LICENSE file. -->
<head>
<link rel="stylesheet" href="chrome-search://local-ntp/animations.css"></link>
<link rel="stylesheet" href="chrome-search://local-ntp/constants.css"></link>
<link rel="stylesheet" href="chrome-search://local-ntp/local-ntp-common.css"></link>
<link rel="stylesheet" href="chrome-search://local-ntp/custom-backgrounds.css"></link>
<link rel="stylesheet" href="chrome-search://local-ntp/doodles.css"></link>
<link rel="stylesheet" href="chrome-search://local-ntp/local-ntp.css"></link>
......
chrome/browser/resources/local_ntp/local_ntp.js
View file @ 67a093ea
......@@ -97,7 +97,7 @@ var CLASSES = {
NON_GOOGLE_PAGE: 'non-google-page',
NON_WHITE_BG: 'non-white-bg',
REMOVE_FAKEBOX: 'remove-fakebox', // Hides the fakebox from the page.
RTL: 'rtl', // Right-to-left language text.
RTL: 'rtl', // Right-to-left language text.
// Applied when the doodle notifier should be shown instead of the doodle.
USE_NOTIFIER: 'use-notifier',
};
......@@ -1210,6 +1210,8 @@ function init() {
createIframes();
}
utils.setPlatformClass(document.body);
document.body.classList.add(CLASSES.INITED);
}
......
chrome/browser/resources/local_ntp/constants.css → chrome/browser/resources/local_ntp/local_ntp_common.css
View file @ 67a093ea
......@@ -48,3 +48,18 @@ html {
--GR600-dark-rgb: 211, 59, 48;
--GR800-dark-rgb: 180, 27, 26;
}
body {
/* Default font families for Linux and ChromeOS. */
font-family: 'Roboto', arial, sans-serif;
}
.win {
/* Default font families for Windows */
font-family: 'Segoe UI', 'Roboto', arial, sans-serif;
}
.mac {
/* Default font families for MacOS */
font-family: system-ui, BlinkMacSystemFont, 'Roboto', arial, sans-serif;
}
chrome/browser/resources/local_ntp/local_ntp_resources.grd
View file @ 67a093ea
......@@ -15,7 +15,7 @@
<include name="IDR_CUSTOM_LINKS_EDIT_CSS" file="custom_links_edit.css" type="BINDATA" />
<include name="IDR_CUSTOM_LINKS_EDIT_JS" file="custom_links_edit.js" type="BINDATA" />
<include name="IDR_CUSTOM_LINKS_EDIT_MENU_SVG" file="icons\edit_menu.svg" type="BINDATA" />
<include name="IDR_LOCAL_NTP_CONSTANTS_CSS" file="constants.css" type="BINDATA" />
<include name="IDR_LOCAL_NTP_COMMON_CSS" file="local_ntp_common.css" type="BINDATA" />
<include name="IDR_LOCAL_NTP_ANIMATIONS_CSS" file="animations.css" flattenhtml="true" type="BINDATA" />
<include name="IDR_LOCAL_NTP_ANIMATIONS_JS" file="animations.js" flattenhtml="true" type="BINDATA" />
<include name="IDR_LOCAL_NTP_CSS" file="local_ntp.css" flattenhtml="true" type="BINDATA" />
......
chrome/browser/resources/local_ntp/most_visited_single.css
View file @ 67a093ea
......@@ -204,7 +204,6 @@ html[darkmode=true] .md-add-icon {
background-color: rgb(var(--GG600-rgb));
border-radius: 50%;
color: white;
font-family: 'Segoe UI', 'Roboto', arial, sans-serif;
font-size: var(--md-fallback-letter-size);
height: var(--md-favicon-size);
line-height: var(--md-favicon-size);
......@@ -212,9 +211,12 @@ html[darkmode=true] .md-add-icon {
width: var(--md-favicon-size);
}
.win .md-fallback-letter {
font-weight: 600;
}
.md-title {
color: rgb(var(--GG800-rgb));
font-family: 'Roboto', arial, sans-serif;
font-size: var(--md-title-font-size);
font-weight: 500;
max-height: var(--md-title-max-height);
......
chrome/browser/resources/local_ntp/most_visited_single.html
View file @ 67a093ea
......@@ -6,7 +6,7 @@
<head>
<base target="_top">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="constants.css">
<link rel="stylesheet" type="text/css" href="local-ntp-common.css">
<link rel="stylesheet" type="text/css" href="single.css">
<script src="utils.js"></script>
<script src="single.js"></script>
......
chrome/browser/resources/local_ntp/most_visited_single.js
View file @ 67a093ea
......@@ -44,7 +44,8 @@ const IDS = {
const CLASSES = {
FAILED_FAVICON: 'failed-favicon', // Applied when the favicon fails to load.
REORDER: 'reorder', // Applied to the tile being moved while reordering.
REORDERING: 'reordering', // Applied while we are reordering.
REORDERING: 'reordering', // Applied while we are reordering.
MAC_CHROMEOS: 'mac-chromeos', // Reduces font weight for MacOS and ChromeOS.
// Material Design classes.
MD_EMPTY_TILE: 'md-empty-tile',
MD_ICON_BACKGROUND: 'md-icon-background',
......@@ -331,6 +332,7 @@ var handleCommand = function(data) {
*/
var showTiles = function(info) {
logEvent(LOG_TYPE.NTP_ALL_TILES_RECEIVED);
utils.setPlatformClass(document.body);
countLoad();
};
......@@ -346,10 +348,11 @@ var updateTheme = function(info) {
document.documentElement.setAttribute('darkmode', info.isDarkMode);
// Reduce font weight on the default(white) background for Mac and CrOS.
document.body.classList.toggle('mac-chromeos',
document.body.classList.toggle(
CLASSES.MAC_CHROMEOS,
!info.isThemeDark && !info.isUsingTheme &&
(navigator.userAgent.indexOf('Mac') > -1 ||
navigator.userAgent.indexOf('CrOS') > -1));
(navigator.userAgent.indexOf('Mac') > -1 ||
navigator.userAgent.indexOf('CrOS') > -1));
};
......@@ -752,9 +755,6 @@ function renderMaterialDesignTile(data) {
let fallbackLetter = document.createElement('div');
fallbackLetter.className = CLASSES.MD_FALLBACK_LETTER;
fallbackLetter.textContent = data.title.charAt(0).toUpperCase();
if (navigator.userAgent.indexOf('Windows') > -1) {
fallbackLetter.style.fontWeight = 600;
}
mdIcon.classList.add(CLASSES.FAILED_FAVICON);
fallbackBackground.appendChild(fallbackLetter);
......@@ -784,10 +784,6 @@ function renderMaterialDesignTile(data) {
let mdTitleTextwrap = document.createElement('span');
mdTitleTextwrap.innerText = data.title;
mdTitle.style.direction = data.direction || 'ltr';
// Windows font family fallback to Segoe
if (navigator.userAgent.indexOf('Windows') > -1) {
mdTitle.style.fontFamily = 'Segoe UI';
}
mdTitleContainer.appendChild(mdTitle);
mdTileInner.appendChild(mdTitleContainer);
mdTile.appendChild(mdTileInner);
......
chrome/browser/resources/local_ntp/utils.js
View file @ 67a093ea
......@@ -2,6 +2,15 @@
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
/**
* Enum for classnames.
* @enum {string}
* @const
*/
const CLASSES = {
MAC: 'mac', // Applies MacOS specific properties.
WIN: 'win', // Applies Windows specific properties.
};
/**
* Alias for document.getElementById.
......@@ -42,3 +51,15 @@ utils.isSchemeAllowed = function(url) {
return url.startsWith('http://') || url.startsWith('https://') ||
url.startsWith('ftp://') || url.startsWith('chrome-extension://');
};
/**
* Sets CSS class for |element| corresponding to the current platform.
* @param {Element} element The element to set the current platform.
*/
utils.setPlatformClass = function(element) {
element.classList.toggle(
CLASSES.WIN, navigator.userAgent.indexOf('Windows') > -1);
element.classList.toggle(
CLASSES.MAC, navigator.userAgent.indexOf('Mac') > -1);
};
chrome/browser/search/local_ntp_source.cc
View file @ 67a093ea
......@@ -109,7 +109,7 @@ const struct Resource{
} kResources[] = {
{"animations.css", IDR_LOCAL_NTP_ANIMATIONS_CSS, "text/css"},
{"animations.js", IDR_LOCAL_NTP_ANIMATIONS_JS, "application/javascript"},
{"constants.css", IDR_LOCAL_NTP_CONSTANTS_CSS, "text/css"},
{"local-ntp-common.css", IDR_LOCAL_NTP_COMMON_CSS, "text/css"},
{"custom-backgrounds.css", IDR_LOCAL_NTP_CUSTOM_BACKGROUNDS_CSS,
"text/css"},
{"custom-backgrounds.js", IDR_LOCAL_NTP_CUSTOM_BACKGROUNDS_JS,
......
chrome/browser/search/most_visited_iframe_source.cc
View file @ 67a093ea
......@@ -39,7 +39,7 @@ const char kEditMenuSvgPath[] = "/edit_menu.svg";
// Used in the single-iframe version and the edit custom links dialog iframe.
const char kAnimationsCSSPath[] = "/animations.css";
const char kAnimationsJSPath[] = "/animations.js";
const char kConstantsCSSPath[] = "/constants.css";
const char kLocalNTPCommonCSSPath[] = "/local-ntp-common.css";
const char kLocalNTPUtilsJSPath[] = "/utils.js";
} // namespace
......@@ -105,8 +105,8 @@ void MostVisitedIframeSource::StartDataRequest(
SendResource(IDR_CUSTOM_LINKS_ADD_WHITE_SVG, callback);
} else if (path == kEditMenuSvgPath) {
SendResource(IDR_CUSTOM_LINKS_EDIT_MENU_SVG, callback);
} else if (path == kConstantsCSSPath) {
SendResource(IDR_LOCAL_NTP_CONSTANTS_CSS, callback);
} else if (path == kLocalNTPCommonCSSPath) {
SendResource(IDR_LOCAL_NTP_COMMON_CSS, callback);
} else if (path == kAnimationsCSSPath) {
SendResource(IDR_LOCAL_NTP_ANIMATIONS_CSS, callback);
} else if (path == kAnimationsJSPath) {
......@@ -125,6 +125,6 @@ bool MostVisitedIframeSource::ServesPath(const std::string& path) const {
path == kCommonCSSPath || path == kEditHTMLPath ||
path == kEditCSSPath || path == kEditJSPath || path == kAddSvgPath ||
path == kAddWhiteSvgPath || path == kEditMenuSvgPath ||
path == kConstantsCSSPath || path == kAnimationsCSSPath ||
path == kLocalNTPCommonCSSPath || path == kAnimationsCSSPath ||
path == kAnimationsJSPath || path == kLocalNTPUtilsJSPath;
}
chrome/test/data/local_ntp/local_ntp_browsertest.html
View file @ 67a093ea
......@@ -6,7 +6,7 @@
<head>
<script>window.localNTPUnitTest = true;</script>
<link rel="stylesheet" href="chrome-search://local-ntp/animations.css"></link>
<link rel="stylesheet" href="chrome-search://local-ntp/constants.css"></link>
<link rel="stylesheet" href="chrome-search://local-ntp/local-ntp-common.css"></link>
<link rel="stylesheet" href="chrome-search://local-ntp/custom-backgrounds.css"></link>
<link rel="stylesheet" href="chrome-search://local-ntp/doodles.css"></link>
<link rel="stylesheet" href="chrome-search://local-ntp/local-ntp.css"></link>
......
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