[NTP] Change Material Design colors to color constants
Continuation of https://crrev.com/c/1416815. Set Material Design colors
as color constants for all NTP components.
Bug: 914982
Change-Id: Ia1cb82e221c0f0dc31562b55ccc88ab6e36f480d
Reviewed-on: https://chromium-review.googlesource.com/c/1419200
Commit-Queue: Kristi Park <kristipark@chromium.org>
Reviewed-by: Kyle Milka <kmilka@chromium.org>
Cr-Commit-Position: refs/heads/master@{#623971}diff --git a/chrome/browser/resources/local_ntp/constants.css b/chrome/browser/resources/local_ntp/constants.css
new file mode 100644
index 0000000..72e81b87
--- /dev/null
+++ b/chrome/browser/resources/local_ntp/constants.css
@@ -0,0 +1,50 @@
+/* Copyright 2019 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+html {
+ /* Material Design colors. Keep in sync with ui/gfx/color_palette.h. */
+
+ --dark-mode-bg-rgb: 50, 54, 57;
+
+ /* Google Grey */
+ --GG050-rgb: 248, 249, 250;
+ --GG100-rgb: 241, 243, 244;
+ --GG200-rgb: 232, 234, 237;
+ --GG300-rgb: 218, 220, 224;
+ --GG400-rgb: 189, 193, 198;
+ --GG500-rgb: 154, 160, 166;
+ --GG600-rgb: 128, 134, 139;
+ --GG700-rgb: 95, 99, 104;
+ --GG800-rgb: 60, 64, 67;
+ --GG900-rgb: 32, 33, 36;
+
+ /* Google Blue */
+ --GB050-rgb: 232, 240, 254;
+ --GB100-rgb: 210, 227, 252;
+ --GB200-rgb: 174, 203, 250;
+ --GB300-rgb: 138, 180, 248;
+ --GB400-rgb: 102, 157, 246;
+ --GB500-rgb: 66, 133, 244;
+ --GB600-rgb: 26, 115, 232;
+ --GB700-rgb: 25, 103, 210;
+ --GB800-rgb: 24, 90, 188;
+ --GB900-rgb: 23, 78, 166;
+ --GB400-dark-rgb: 107, 165, 237;
+ --GB600-dark-rgb: 37, 129, 223;
+
+ /* Google Red */
+ --GR050-rgb: 252, 142, 230;
+ --GR100-rgb: 250, 210, 207;
+ --GR200-rgb: 246, 174, 169;
+ --GR300-rgb: 242, 139, 130;
+ --GR400-rgb: 238, 103, 92;
+ --GR500-rgb: 234, 67, 53;
+ --GR600-rgb: 217, 48, 37;
+ --GR700-rgb: 197, 34, 31;
+ --GR800-rgb: 179, 20, 18;
+ --GR900-rgb: 165, 14, 14;
+ --GR500-dark-rgb: 230, 106, 94;
+ --GR600-dark-rgb: 211, 59, 48;
+ --GR800-dark-rgb: 180, 27, 26;
+}
diff --git a/chrome/browser/resources/local_ntp/custom_backgrounds.css b/chrome/browser/resources/local_ntp/custom_backgrounds.css
index 89527d1..80da01e 100644
--- a/chrome/browser/resources/local_ntp/custom_backgrounds.css
+++ b/chrome/browser/resources/local_ntp/custom_backgrounds.css
@@ -32,11 +32,11 @@
}
#edit-bg:hover {
- background-color: rgba(32, 33, 36, .1);
+ background-color: rgba(var(--GG900-rgb), .1);
}
#edit-bg:active {
- background-color: rgba(32, 33, 36, .16);
+ background-color: rgba(var(--GG900-rgb), .16);
}
.non-white-bg #edit-bg:hover {
@@ -74,7 +74,8 @@
border-radius: 8px;
border-width: thin;
bottom: 44px;
- box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
+ box-shadow: 0 1px 3px 0 rgba(var(--GG800-rgb), 0.3),
+ 0 4px 8px 3px rgba(var(--GG800-rgb), 0.15);
left: auto;
padding: 0;
position: fixed;
@@ -92,7 +93,7 @@
}
#edit-bg-title {
- color: rgb(32, 33, 36);
+ color: rgb(var(--GG900-rgb));
font-family: 'Roboto', arial, sans-serif;
font-size: 15px;
height: 30px;
@@ -104,7 +105,7 @@
}
.bg-option {
- color: rgb(60, 64, 67);
+ color: rgb(var(--GG800-rgb));
font-family: 'Roboto', arial, sans-serif;
font-size: 13px;
height: 40px;
@@ -112,7 +113,7 @@
}
.bg-option:hover {
- background-color: rgb(241, 243, 244);
+ background-color: rgb(var(--GG100-rgb));
}
.bg-option-img {
@@ -151,23 +152,23 @@
}
#edit-bg-upload-image .bg-option-img {
- background: rgb(241, 243, 244) url(icons/upload.svg) no-repeat center;
+ background: rgb(var(--GG100-rgb)) url(icons/upload.svg) no-repeat center;
border-radius: 50%;
}
#edit-bg-divider {
- border-bottom: 1px solid rgb(232, 234, 237);
+ border-bottom: 1px solid rgb(var(--GG200-rgb));
margin: 8px 0;
width: 100%;
}
#custom-links-restore-default .bg-option-img {
- background: rgb(241, 243, 244) url(icons/link_gray.svg) no-repeat center;
+ background: rgb(var(--GG100-rgb)) url(icons/link_gray.svg) no-repeat center;
border-radius: 50%;
}
#edit-bg-restore-default .bg-option-img {
- background: rgb(241, 243, 244) url(icons/chrome.svg) no-repeat center;
+ background: rgb(var(--GG100-rgb)) url(icons/chrome.svg) no-repeat center;
border-radius: 50%;
}
@@ -199,7 +200,8 @@
border: none;
border-radius: 8px;
bottom: 0;
- box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
+ 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;
left: 0;
@@ -247,7 +249,7 @@
}
#bg-sel-title-bar {
- border-bottom: 1px solid rgb(232, 234, 237);
+ border-bottom: 1px solid rgb(var(--GG200-rgb));
font-size: 15px;
height: 51px;
line-height: 52px;
@@ -275,7 +277,7 @@
#bg-sel-back-circle:active,
#bg-sel-back-circle:focus {
- background: rgb(218, 220, 224);
+ background: rgb(var(--GG300-rgb));
background-position: center;
background-size: 36px 36px;
}
@@ -315,7 +317,7 @@
}
#bg-sel-title {
- color: rgb(32, 33, 36);
+ color: rgb(var(--GG900-rgb));
display: inline-block;
height: 20px;
line-height: 20px;
@@ -340,9 +342,9 @@
}
#bg-sel-footer {
- border-top: 1px solid rgba(232, 234, 237, 1);
+ border-top: 1px solid rgb(var(--GG200-rgb));
bottom: 0;
- color: rgb(60, 64, 67);
+ color: rgb(var(--GG800-rgb));
height: 64px;
padding-left: 0;
position: absolute;
@@ -379,8 +381,8 @@
}
#bg-sel-footer-done {
- background-color: rgb(241, 243, 244);
- color: rgb(128, 134, 139);
+ background-color: rgb(var(--GG100-rgb));
+ color: rgb(var(--GG600-rgb));
margin-right: 16px;
}
@@ -391,8 +393,8 @@
#bg-sel-footer-cancel {
background-color: white;
- border: 1px solid rgb(218, 220, 224);
- color: rgb(26, 115, 232);
+ border: 1px solid rgb(var(--GG300-rgb));
+ color: rgb(var(--GB600-rgb));
margin-right: 8px;
}
@@ -401,31 +403,31 @@
}
#bg-sel-footer-cancel:hover {
- background-color: rgba(66, 133, 244, 0.04);
- border-color: rgb(210, 227, 252);
+ background-color: rgba(var(--GB500-rgb), 0.04);
+ border-color: rgb(var(--GB100-rgb));
}
#bg-sel-footer-cancel:active {
background-color: white;
border-color: white;
- box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
- 0 3px 6px 2px rgba(60, 64, 67, 0.15);
+ box-shadow: 0 1px 2px 0 rgba(var(--GG800-rgb), 0.3),
+ 0 3px 6px 2px rgba(var(--GG800-rgb), 0.15);
}
#bg-sel-footer-done:not(:disabled) {
- background-color: rgb(26, 115, 232);
+ background-color: rgb(var(--GB600-rgb));
color: white;
}
#bg-sel-footer-done:hover:not(:disabled) {
background-color: rgb(41, 123, 231);
- box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3),
- 0 1px 3px 1px rgba(66, 133, 244, 0.15);
+ box-shadow: 0 1px 2px 0 rgba(var(--GB500-rgb), 0.3),
+ 0 1px 3px 1px rgba(var(--GB500-rgb), 0.15);
}
#bg-sel-footer-done:active:not(:disabled) {
- box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3),
- 0 3px 6px 2px rgba(66, 133, 244, 0.15);
+ box-shadow: 0 1px 2px 0 rgba(var(--GB500-rgb), 0.3),
+ 0 3px 6px 2px rgba(var(--GB500-rgb), 0.15);
}
#bg-sel-footer-toggle-text {
@@ -445,7 +447,7 @@
}
.bg-sel-tile-bg {
- background-color: rgb(241, 243, 244);
+ background-color: rgb(var(--GG100-rgb));
background-size: cover;
display: inline-block;
height: 117px;
@@ -483,7 +485,7 @@
}
.selected-border {
- border: 2px solid rgba(26, 115, 232, .4);
+ border: 2px solid rgba(var(--GB600-rgb), .4);
border-radius: 4px;
box-sizing: border-box;
height: 100%;
@@ -522,7 +524,7 @@
}
.bg-sel-tile-title {
- background-color: rgba(32, 33, 36, 0.71);
+ background-color: rgba(var(--GG900-rgb), 0.71);
bottom: 0;
box-sizing: border-box;
color: #FFF;
@@ -613,7 +615,7 @@
}
#custom-bg-attr.attr-link:hover {
- background: rgba(32, 33, 36, .1);
+ background: rgba(var(--GG900-rgb), .1);
}
.attr1.attr-link,
diff --git a/chrome/browser/resources/local_ntp/custom_links_edit.css b/chrome/browser/resources/local_ntp/custom_links_edit.css
index cb87556..a32dcea 100644
--- a/chrome/browser/resources/local_ntp/custom_links_edit.css
+++ b/chrome/browser/resources/local_ntp/custom_links_edit.css
@@ -15,8 +15,8 @@
border: none;
border-radius: 8px;
bottom: 0;
- box-shadow:
- 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
+ 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;
@@ -34,7 +34,7 @@
}
#dialog-title {
- color: rgb(32, 33, 36);
+ color: rgb(var(--GG900-rgb));
font-family: 'Roboto', arial, sans-serif;
font-size: 15px;
line-height: 24px;
@@ -46,7 +46,7 @@
}
.field-title {
- color: rgb(95, 99, 104);
+ color: rgb(var(--GG700-rgb));
font-size: 10px;
font-weight: 500;
margin-bottom: 4px;
@@ -57,11 +57,11 @@
}
input {
- background-color: rgb(241, 243, 244);
+ background-color: rgb(var(--GG100-rgb));
border: none;
border-radius: 4px;
- caret-color: rgb(26, 115, 232);
- color: rgb(32, 33, 36);
+ caret-color: rgb(var(--GB600-rgb));
+ color: rgb(var(--GG900-rgb));
font-family: 'Roboto', arial, sans-serif;
font-size: 13px;
height: 32px;
@@ -77,11 +77,11 @@
}
input::placeholder {
- color: rgba(32, 33, 36, 0.38);
+ color: rgba(var(--GG900-rgb), 0.38);
}
.underline {
- border-bottom: 2px solid rgb(26, 115, 232);
+ border-bottom: 2px solid rgb(var(--GB600-rgb));
bottom: 0;
box-sizing: border-box;
left: 0;
@@ -100,11 +100,11 @@
}
.field-title.focused {
- color: rgb(26, 115, 232);
+ color: rgb(var(--GB600-rgb));
}
.error-msg {
- color: rgb(217, 48, 37);
+ color: rgb(var(--GR600-rgb));
display: none;
font-size: 10px;
font-weight: 400;
@@ -112,7 +112,7 @@
}
.invalid label {
- color: rgb(217, 48, 37);
+ color: rgb(var(--GR600-rgb));
}
.invalid .error-msg {
@@ -120,7 +120,7 @@
}
.invalid .underline {
- border-color: rgb(217, 48, 37);
+ border-color: rgb(var(--GR600-rgb));
opacity: 1;
transition: width 180ms ease-out, opacity 120ms ease-in;
width: 100%;
@@ -159,47 +159,47 @@
}
button.primary {
- background-color: rgb(26, 115, 232);
+ background-color: rgb(var(--GB600-rgb));
color: white;
}
button.primary:disabled {
- background-color: rgb(241, 243, 244);
- color: rgb(128, 134, 139);
+ background-color: rgb(var(--GG100-rgb));
+ color: rgb(var(--GG600-rgb));
}
button.primary:hover:not(:disabled) {
background-color: rgb(41, 123, 231);
- box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3),
- 0 1px 3px 1px rgba(66, 133, 244, 0.15);
+ box-shadow: 0 1px 2px 0 rgba(var(--GB500-rgb), 0.3),
+ 0 1px 3px 1px rgba(var(--GB500-rgb), 0.15);
}
button.primary:active:not(:disabled) {
- box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3),
- 0 3px 6px 2px rgba(66, 133, 244, 0.15);
+ box-shadow: 0 1px 2px 0 rgba(var(--GB500-rgb), 0.3),
+ 0 3px 6px 2px rgba(var(--GB500-rgb), 0.15);
}
button.secondary {
background-color: white;
- border: 1px solid rgb(218, 220, 224);
- color: rgb(26, 115, 232);
+ border: 1px solid rgb(var(--GG300-rgb));
+ color: rgb(var(--GB600-rgb));
}
button.secondary:disabled {
- border-color: rgb(241, 243, 244);
- color: rgb(128, 134, 139);
+ border-color: rgb(var(--GG100-rgb));
+ color: rgb(var(--GG600-rgb));
}
button.secondary:hover:not(:disabled) {
- background-color: rgba(66, 133, 244, 0.04);
- border-color: rgb(210, 227, 252);
+ background-color: rgba(var(--GB500-rgb), 0.04);
+ border-color: rgb(var(--GB100-rgb));
}
button.secondary:active:not(:disabled) {
background-color: white;
border-color: white;
- box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
- 0 3px 6px 2px rgba(60, 64, 67, 0.15);
+ box-shadow: 0 1px 2px 0 rgba(var(--GG800-rgb), 0.3),
+ 0 3px 6px 2px rgba(var(--GG800-rgb), 0.15);
}
html:not([dir=rtl]) #cancel {
diff --git a/chrome/browser/resources/local_ntp/custom_links_edit.html b/chrome/browser/resources/local_ntp/custom_links_edit.html
index e2b6a3ac..bba8c4d 100644
--- a/chrome/browser/resources/local_ntp/custom_links_edit.html
+++ b/chrome/browser/resources/local_ntp/custom_links_edit.html
@@ -7,6 +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="edit.css">
<script src="utils.js"></script>
<script src="animations.js"></script>
diff --git a/chrome/browser/resources/local_ntp/local_ntp.css b/chrome/browser/resources/local_ntp/local_ntp.css
index 242f282..9ef38758 100644
--- a/chrome/browser/resources/local_ntp/local_ntp.css
+++ b/chrome/browser/resources/local_ntp/local_ntp.css
@@ -123,7 +123,7 @@
}
#fakebox {
- background-color: rgb(241, 243, 244);
+ background-color: rgb(var(--GG100-rgb));
border-radius: 22px;
cursor: text;
font-size: 18px;
@@ -138,7 +138,7 @@
}
#fakebox:hover {
- background-color: rgb(232, 234, 237);
+ background-color: rgb(var(--GG200-rgb));
}
.non-google-page #fakebox-container {
@@ -165,7 +165,7 @@
#fakebox-text {
bottom: 4px;
- color: rgb(128, 134, 139);
+ color: rgb(var(--GG600-rgb));
font-family: 'Roboto', arial, sans-serif;
font-size: 14px;
left: 0;
@@ -290,7 +290,7 @@
-webkit-mask-position: 3px 3px;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 10px 10px;
- background-color: rgba(90,90,90,0.7);
+ background-color: rgba(90, 90, 90, 0.7);
cursor: pointer;
display: inline-block;
filter: var(--theme-filter, 'none');
@@ -307,11 +307,11 @@
}
#mv-notice-x:hover {
- background-color: rgba(90,90,90,1.0);
+ background-color: rgba(90, 90, 90, 1.0);
}
#mv-notice-x:active {
- background-color: rgb(66,133,244);
+ background-color: rgb(var(--GB500-rgb));
}
.md-icons #mv-notice-x {
@@ -359,7 +359,7 @@
.md-icons #mv-notice {
background-color: white;
- border: 1px solid rgb(218, 220, 224);
+ 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;
@@ -379,7 +379,7 @@
}
.md-icons #mv-notice span {
- color: rgb(95,99,104);
+ color: rgb(var(--GG700-rgb));
height: auto;
line-height: 32px;
vertical-align: unset;
@@ -397,7 +397,7 @@
.md-icons #mv-notice-links span {
/* Necessary for a "pill" shape. Using 50% creates an oval. */
border-radius: 16px;
- color: rgb(26, 115, 232);
+ color: rgb(var(--GB600-rgb));
margin-inline-start: 0;
padding: 0 16px;
position: relative;
@@ -410,7 +410,7 @@
.md-icons #mv-notice-links span:hover,
.md-icons #mv-notice-links span:active {
- background-color: rgba(26,115,232, 0.1);
+ background-color: rgba(var(--GB600-rgb), 0.1);
text-decoration: none;
transition: background-color 200ms;
}
@@ -556,7 +556,7 @@
}
input:checked + .toggle {
- background-color: rgba(26, 115, 232, .5);
+ background-color: rgba(var(--GB600-rgb), .5);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
}
@@ -566,7 +566,7 @@
input:checked + .toggle::before {
-webkit-transform: translateX(26px);
- background-color: rgb(26, 115, 232);
+ background-color: rgb(var(--GB600-rgb));
transform: translateX(26px);
}
@@ -585,10 +585,10 @@
#error-notice {
background-color: white;
- border: 1px solid rgb(218, 220, 224);
+ border: 1px solid rgb(var(--GG300-rgb));
/* Necessary for a "pill" shape. Using 50% creates an oval. */
border-radius: 16px;
- color: rgb(217, 48, 37);
+ color: rgb(var(--GR600-rgb));
display: flex;
font-family: 'Roboto', arial, sans-serif;
font-size: 12px;
@@ -640,7 +640,7 @@
#error-notice-link {
/* Necessary for a "pill" shape. Using 50% creates an oval. */
border-radius: 16px;
- color: rgb(26, 115, 232);
+ color: rgb(var(--GB600-rgb));
cursor: pointer;
display: none;
outline: none;
@@ -659,7 +659,7 @@
#error-notice-link:hover,
#error-notice-link:active {
- background-color: rgba(26,115,232, 0.1);
+ background-color: rgba(var(--GB600-rgb), 0.1);
text-decoration: none;
transition: background-color 200ms;
}
@@ -680,10 +680,10 @@
#promo > div {
background-color: #FFF;
- border: 1px solid rgb(218, 220, 224);
+ border: 1px solid rgb(var(--GG300-rgb));
border-radius: 16px;
box-sizing: border-box;
- color: rgb(95, 99, 104);
+ color: rgb(var(--GG700-rgb));
display: inline-block;
font-family: 'Roboto', arial, sans-serif;
font-size: 12px;
diff --git a/chrome/browser/resources/local_ntp/local_ntp.html b/chrome/browser/resources/local_ntp/local_ntp.html
index 92d45cf..073e394 100644
--- a/chrome/browser/resources/local_ntp/local_ntp.html
+++ b/chrome/browser/resources/local_ntp/local_ntp.html
@@ -5,6 +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/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>
diff --git a/chrome/browser/resources/local_ntp/most_visited_single.css b/chrome/browser/resources/local_ntp/most_visited_single.css
index dfb0df76..a224468 100644
--- a/chrome/browser/resources/local_ntp/most_visited_single.css
+++ b/chrome/browser/resources/local_ntp/most_visited_single.css
@@ -24,19 +24,6 @@
--md-title-height: 24px;
--md-title-max-height: 28px;
- /* Material Design colors */
- --dark-mode-bg-rgb: 50, 54, 57;
- --GG900-rgb: 32, 33, 36;
- --GG800-rgb: 60, 64, 67;
- --GG700-rgb: 95, 99, 104;
- --GG600-rgb: 128, 134, 139;
- --GG500-rgb: 154, 160, 166;
- --GG400-rgb: 189, 193, 198;
- --GG300-rgb: 218, 220, 224;
- --GG200-rgb: 232, 234, 237;
- --GG100-rgb: 241, 243, 244;
- --GG50-rgb: 248, 249, 250;
-
/* May be overridden by themes (on the body element). */
--tile-title-color: #323232;
}
@@ -255,7 +242,7 @@
/* Apply when a custom background is set. */
body.dark-theme .md-tile-container:not(.reorder) .md-title {
- color: rgb(var(--GG50-rgb));
+ color: rgb(var(--GG050-rgb));
filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.35));
}
diff --git a/chrome/browser/resources/local_ntp/most_visited_single.html b/chrome/browser/resources/local_ntp/most_visited_single.html
index 4d8b174..92bf1458 100644
--- a/chrome/browser/resources/local_ntp/most_visited_single.html
+++ b/chrome/browser/resources/local_ntp/most_visited_single.html
@@ -6,6 +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="single.css">
<script src="utils.js"></script>
<script src="single.js"></script>
diff --git a/chrome/browser/resources/local_ntp_resources.grd b/chrome/browser/resources/local_ntp_resources.grd
index 3eae537..a7828b51 100644
--- a/chrome/browser/resources/local_ntp_resources.grd
+++ b/chrome/browser/resources/local_ntp_resources.grd
@@ -15,6 +15,7 @@
<include name="IDR_CUSTOM_LINKS_EDIT_CSS" file="local_ntp\custom_links_edit.css" type="BINDATA" />
<include name="IDR_CUSTOM_LINKS_EDIT_JS" file="local_ntp\custom_links_edit.js" type="BINDATA" />
<include name="IDR_CUSTOM_LINKS_EDIT_MENU_SVG" file="local_ntp\icons\edit_menu.svg" type="BINDATA" />
+ <include name="IDR_LOCAL_NTP_CONSTANTS_CSS" file="local_ntp\constants.css" type="BINDATA" />
<include name="IDR_LOCAL_NTP_ANIMATIONS_CSS" file="local_ntp\animations.css" flattenhtml="true" type="BINDATA" />
<include name="IDR_LOCAL_NTP_ANIMATIONS_JS" file="local_ntp\animations.js" flattenhtml="true" type="BINDATA" />
<include name="IDR_LOCAL_NTP_CSS" file="local_ntp\local_ntp.css" flattenhtml="true" type="BINDATA" />
diff --git a/chrome/browser/search/local_ntp_source.cc b/chrome/browser/search/local_ntp_source.cc
index 366724d..7bdfab4 100644
--- a/chrome/browser/search/local_ntp_source.cc
+++ b/chrome/browser/search/local_ntp_source.cc
@@ -111,6 +111,7 @@
} 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"},
{"custom-backgrounds.css", IDR_LOCAL_NTP_CUSTOM_BACKGROUNDS_CSS,
"text/css"},
{"custom-backgrounds.js", IDR_LOCAL_NTP_CUSTOM_BACKGROUNDS_JS,
diff --git a/chrome/browser/search/most_visited_iframe_source.cc b/chrome/browser/search/most_visited_iframe_source.cc
index e5d47db..eda19c26 100644
--- a/chrome/browser/search/most_visited_iframe_source.cc
+++ b/chrome/browser/search/most_visited_iframe_source.cc
@@ -39,6 +39,7 @@
// 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 kLocalNTPUtilsJSPath[] = "/utils.js";
} // namespace
@@ -104,6 +105,8 @@
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 == kAnimationsCSSPath) {
SendResource(IDR_LOCAL_NTP_ANIMATIONS_CSS, callback);
} else if (path == kAnimationsJSPath) {
@@ -122,6 +125,6 @@
path == kCommonCSSPath || path == kEditHTMLPath ||
path == kEditCSSPath || path == kEditJSPath || path == kAddSvgPath ||
path == kAddWhiteSvgPath || path == kEditMenuSvgPath ||
- path == kAnimationsCSSPath || path == kAnimationsJSPath ||
- path == kLocalNTPUtilsJSPath;
+ path == kConstantsCSSPath || path == kAnimationsCSSPath ||
+ path == kAnimationsJSPath || path == kLocalNTPUtilsJSPath;
}
