commit f0ed64b085f382514999e686b62cb08d10968d18
Author: dbeam <
db...@chromium.org>
AuthorDate: Thu Apr 21 17:22:10 2016
Commit: Commit bot <
commi...@chromium.org>
CommitDate: Thu Apr 21 17:24:22 2016
MD Downloads/History: unify page and toolbar background colors
R=
dsch...@chromium.org
BUG=598451
Review URL:
https://codereview.chromium.org/1899043003
Cr-Commit-Position: refs/heads/master@{#388801}
diff --git a/chrome/browser/resources/md_downloads/crisper.js b/chrome/browser/resources/md_downloads/crisper.js
index f720148..dcb91ab 100644
--- a/chrome/browser/resources/md_downloads/crisper.js
+++ b/chrome/browser/resources/md_downloads/crisper.js
@@ -93,7 +93,7 @@
* @template T
*/
function PromiseResolver() {
- /** @private {function(T): void} */
+ /** @private {function(T=): void} */
this.resolve_;
/** @private {function(*=): void} */
@@ -111,7 +111,7 @@
get promise() { return this.promise_; },
set promise(p) { assertNotReached(); },
- /** @return {function(T): void} */
+ /** @return {function(T=): void} */
get resolve() { return this.resolve_; },
set resolve(r) { assertNotReached(); },
diff --git a/chrome/browser/resources/md_downloads/downloads.html b/chrome/browser/resources/md_downloads/downloads.html
index 81e8678..e5bcb49 100644
--- a/chrome/browser/resources/md_downloads/downloads.html
+++ b/chrome/browser/resources/md_downloads/downloads.html
@@ -4,9 +4,10 @@
<meta charset="utf-8">
<title i18n-content="title"></title>
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
+ <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
<style>
html {
- background: rgb(236, 239, 241);
+ background: var(--md-background-color);
}
html,
diff --git a/chrome/browser/resources/md_downloads/manager.html b/chrome/browser/resources/md_downloads/manager.html
index 9aae9ac..3e18aa3 100644
--- a/chrome/browser/resources/md_downloads/manager.html
+++ b/chrome/browser/resources/md_downloads/manager.html
@@ -12,6 +12,12 @@
<dom-module id="downloads-manager">
<template>
+ <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
+ <style>
+ #toolbar {
+ background: var(--md-toolbar-color);
+ }
+ </style>
<downloads-toolbar id="toolbar"></downloads-toolbar>
<iron-list id="downloads-list" items="{{items_}}"
hidden="[[!hasDownloads_]]">
diff --git a/chrome/browser/resources/md_downloads/toolbar.css b/chrome/browser/resources/md_downloads/toolbar.css
index 3e8d151..0437ef8 100644
--- a/chrome/browser/resources/md_downloads/toolbar.css
+++ b/chrome/browser/resources/md_downloads/toolbar.css
@@ -4,7 +4,7 @@
:host {
align-items: center;
- background: rgb(52, 73, 94);
+ background: var(--md-toolbar-color);
color: white;
content-sizing: padding-box;
display: flex;
diff --git a/chrome/browser/resources/md_downloads/vulcanized.html b/chrome/browser/resources/md_downloads/vulcanized.html
index 26afe8d..fa60b5b 100644
--- a/chrome/browser/resources/md_downloads/vulcanized.html
+++ b/chrome/browser/resources/md_downloads/vulcanized.html
@@ -19,8 +19,17 @@
<title i18n-content="title"></title>
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
<style>
+:root {
+ /* These are custom, Chrome-specific colors that don't have --paper or
+ * --google equivalents. Blame bettes@.
http://crbug.com/598451 */
+ --md-background-color: rgb(236, 239, 241);
+ --md-toolbar-color: rgb(52, 73, 94);
+}
+
+</style>
+ <style>
html {
- background: rgb(236, 239, 241);
+ background: var(--md-background-color);
}
html,
@@ -36,8 +45,6 @@
</head>
<body><div hidden="" by-vulcanize=""><script src="chrome://resources/js/load_time_data.js"></script>
<script src="chrome://downloads/strings.js"></script>
-
-
<dom-module id="iron-list" assetpath="chrome://resources/polymer/v1_0/iron-list/">
<template>
<style>
@@ -427,6 +434,8 @@
}
</style>
+
+
<dom-module id="iron-icon" assetpath="chrome://resources/polymer/v1_0/iron-icon/">
<style>
@@ -917,6 +926,8 @@
</style>
</template>
</dom-module>
+
+
<dom-module id="paper-material" assetpath="chrome://resources/polymer/v1_0/paper-material/">
<template>
<style include="paper-material-shared-styles"></style>
@@ -1308,6 +1319,8 @@
}
</style>
+
+
<dom-module id="paper-progress" assetpath="chrome://resources/polymer/v1_0/paper-progress/">
<template>
<style>
@@ -1821,8 +1834,6 @@
</dom-module>
-
-
<style is="custom-style">
:root {
@@ -1937,7 +1948,9 @@
</style>
</template>
</dom-module>
-</llink><dom-module id="paper-item" assetpath="chrome://resources/polymer/v1_0/paper-item/">
+</llink>
+
+<dom-module id="paper-item" assetpath="chrome://resources/polymer/v1_0/paper-item/">
<template>
<style include="paper-item-shared-styles"></style>
<style>
@@ -1991,6 +2004,8 @@
</style>
</template>
</dom-module>
+
+
<dom-module id="paper-menu" assetpath="chrome://resources/polymer/v1_0/paper-menu/">
<template>
<style include="paper-menu-shared-styles"></style>
@@ -2046,6 +2061,8 @@
</dom-module>
<script src="chrome://resources/polymer/v1_0/web-animations-js/web-animations-next-lite.min.js"></script>
+
+
<dom-module id="iron-dropdown" assetpath="chrome://resources/polymer/v1_0/iron-dropdown/">
<style>
:host {
@@ -2192,6 +2209,36 @@
</template>
</dom-module>
+<style>
+/* Copyright 2015 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. */
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 300;
+ src: local('Roboto Light'), local('Roboto-Light'),
+ url("chrome://resources/roboto/roboto-light.woff2") format('woff2');
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Roboto'), local('Roboto-Regular'),
+ url("chrome://resources/roboto/roboto-regular.woff2") format('woff2');
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ src: local('Roboto Medium'), local('Roboto-Medium'),
+ url("chrome://resources/roboto/roboto-medium.woff2") format('woff2');
+}
+
+</style>
<style is="custom-style">
:root {
@@ -2348,36 +2395,8 @@
}
</style>
-<style>
-/* Copyright 2015 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. */
-@font-face {
- font-family: 'Roboto';
- font-style: normal;
- font-weight: 300;
- src: local('Roboto Light'), local('Roboto-Light'),
- url("chrome://resources/roboto/roboto-light.woff2") format('woff2');
-}
-@font-face {
- font-family: 'Roboto';
- font-style: normal;
- font-weight: 400;
- src: local('Roboto'), local('Roboto-Regular'),
- url("chrome://resources/roboto/roboto-regular.woff2") format('woff2');
-}
-
-@font-face {
- font-family: 'Roboto';
- font-style: normal;
- font-weight: 500;
- src: local('Roboto Medium'), local('Roboto-Medium'),
- url("chrome://resources/roboto/roboto-medium.woff2") format('woff2');
-}
-
-</style>
<dom-module id="paper-input-container" assetpath="chrome://resources/polymer/v1_0/paper-input/">
<template>
<style>
@@ -2705,7 +2724,7 @@
:host {
align-items: center;
- background: rgb(52, 73, 94);
+ background: var(--md-toolbar-color);
color: white;
content-sizing: padding-box;
display: flex;
@@ -2917,6 +2936,20 @@
}
</style>
+ <style>
+:root {
+ /* These are custom, Chrome-specific colors that don't have --paper or
+ * --google equivalents. Blame bettes@.
http://crbug.com/598451 */
+ --md-background-color: rgb(236, 239, 241);
+ --md-toolbar-color: rgb(52, 73, 94);
+}
+
+</style>
+ <style>
+ #toolbar {
+ background: var(--md-toolbar-color);
+ }
+ </style>
<downloads-toolbar id="toolbar"></downloads-toolbar>
<iron-list id="downloads-list" items="{{items_}}" hidden="[[!hasDownloads_]]">
<template>
diff --git a/chrome/browser/resources/md_history/history.html b/chrome/browser/resources/md_history/history.html
index f633828..3d4e973 100644
--- a/chrome/browser/resources/md_history/history.html
+++ b/chrome/browser/resources/md_history/history.html
@@ -5,6 +5,7 @@
<title>$i18n{title}</title>
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
+ <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
<style>
html,
@@ -14,7 +15,7 @@
}
body {
- background: #f2f2f2;
+ background: var(--md-background-color);
display: flex;
flex-direction: column;
min-width: 800px;
@@ -54,11 +55,15 @@
.loading #loading-toolbar {
-webkit-padding-start: 24px;
align-items: center;
- background: rgb(63, 85, 102);
color: #fff;
flex-direction: row;
font-weight: 400;
height: 56px;
+ }
+
+ #toolbar,
+ .loading #loading-toolbar {
+ background: var(--md-toolbar-color);
}
.loading #loading-message {
@@ -73,6 +78,7 @@
<body class="loading">
<history-toolbar class="paper-header" id="toolbar"></history-toolbar>
+
<div id="main-container">
<history-side-bar id="history-side-bar"></history-side-bar>
<history-list id="history-list"></history-list>
diff --git a/chrome/browser/resources/md_history/history_toolbar.html b/chrome/browser/resources/md_history/history_toolbar.html
index 08ce517..2181c34 100644
--- a/chrome/browser/resources/md_history/history_toolbar.html
+++ b/chrome/browser/resources/md_history/history_toolbar.html
@@ -9,7 +9,6 @@
<template>
<style include="shared-style">
:host {
- background: rgb(63, 85, 102);
color: #fff;
height: 56px;
transition: background-color 150ms;
diff --git a/ui/webui/resources/css/md_colors.css b/ui/webui/resources/css/md_colors.css
new file mode 100644
index 0000000..afb4455
--- /dev/null
+++ b/ui/webui/resources/css/md_colors.css
@@ -0,0 +1,10 @@
+/* Copyright 2016 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. */
+
+:root {
+ /* These are custom, Chrome-specific colors that don't have --paper or
+ * --google equivalents. Blame bettes@.
http://crbug.com/598451 */
+ --md-background-color: rgb(236, 239, 241);
+ --md-toolbar-color: rgb(52, 73, 94);
+}
diff --git a/ui/webui/resources/webui_resources.grd b/ui/webui/resources/webui_resources.grd
index aadc894..237c7bd 100644
--- a/ui/webui/resources/webui_resources.grd
+++ b/ui/webui/resources/webui_resources.grd
@@ -223,6 +223,8 @@
file="css/i18n_process.css" type="chrome_html" />
<structure name="IDR_WEBUI_CSS_LIST"
file="css/list.css" type="chrome_html" />
+ <structure name="IDR_WEBUI_CSS_MD_COLORS"
+ file="css/md_colors.css" type="chrome_html" />
<structure name="IDR_WEBUI_CSS_MENU"
file="css/menu.css" type="chrome_html"
flattenhtml="true" />