MD History/Downloads: Update toolbar and background color
Updates colors to match latest specs
BUG=614590
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation
Review-Url: https://codereview.chromium.org/2011943005
Cr-Commit-Position: refs/heads/master@{#397007}
diff --git a/chrome/browser/resources/md_downloads/crisper.js b/chrome/browser/resources/md_downloads/crisper.js
index 8ccb820..f40bce7 100644
--- a/chrome/browser/resources/md_downloads/crisper.js
+++ b/chrome/browser/resources/md_downloads/crisper.js
@@ -10333,6 +10333,111 @@
}
}
});
+// 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.
+
+/** @interface */
+var SearchFieldDelegate = function() {};
+
+SearchFieldDelegate.prototype = {
+ /**
+ * @param {string} value
+ */
+ onSearchTermSearch: assertNotReached,
+};
+
+/**
+ * Implements an incremental search field which can be shown and hidden.
+ * Canonical implementation is <cr-search-field>.
+ * @polymerBehavior
+ */
+var CrSearchFieldBehavior = {
+ properties: {
+ label: {
+ type: String,
+ value: '',
+ },
+
+ clearLabel: {
+ type: String,
+ value: '',
+ },
+
+ showingSearch: {
+ type: Boolean,
+ value: false,
+ notify: true,
+ observer: 'showingSearchChanged_',
+ reflectToAttribute: true
+ },
+
+ hasSearchText: Boolean,
+ },
+
+ /**
+ * @return {string} The value of the search field.
+ */
+ getValue: function() {
+ return this.$.searchInput.value;
+ },
+
+ /**
+ * Sets the value of the search field, if it exists.
+ * @param {string} value
+ */
+ setValue: function(value) {
+ // Use bindValue when setting the input value so that changes propagate
+ // correctly.
+ this.$.searchInput.bindValue = value;
+ this.hasSearchText = value != '';
+ },
+
+ /** @param {SearchFieldDelegate} delegate */
+ setDelegate: function(delegate) {
+ this.delegate_ = delegate;
+ },
+
+ showAndFocus: function() {
+ this.showingSearch = true;
+ this.focus_();
+ },
+
+ /** @private */
+ focus_: function() {
+ this.$.searchInput.focus();
+ },
+
+ /** @private */
+ onSearchTermSearch_: function() {
+ this.hasSearchText = this.getValue() != '';
+ if (this.delegate_)
+ this.delegate_.onSearchTermSearch(this.getValue());
+ },
+
+ /** @private */
+ onSearchTermKeydown_: function(e) {
+ if (e.key == 'Escape')
+ this.showingSearch = false;
+ },
+
+ /** @private */
+ showingSearchChanged_: function() {
+ if (this.showingSearch) {
+ this.focus_();
+ return;
+ }
+
+ this.setValue('');
+ this.$.searchInput.blur();
+ this.onSearchTermSearch_();
+ },
+
+ /** @private */
+ toggleShowingSearch_: function() {
+ this.showingSearch = !this.showingSearch;
+ },
+};
(function() {
'use strict';
@@ -11098,123 +11203,9 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-/** @interface */
-var SearchFieldDelegate = function() {};
-
-SearchFieldDelegate.prototype = {
- /**
- * @param {string} value
- */
- onSearchTermSearch: assertNotReached,
-};
-
var SearchField = Polymer({
is: 'cr-search-field',
-
- properties: {
- label: {
- type: String,
- value: '',
- },
-
- clearLabel: {
- type: String,
- value: '',
- },
-
- showingSearch_: {
- type: Boolean,
- value: false,
- observer: 'showingSearchChanged_',
- },
- },
-
- /**
- * Returns the value of the search field.
- * @return {string}
- */
- getValue: function() {
- var searchInput = this.getSearchInput_();
- return searchInput ? searchInput.value : '';
- },
-
- /**
- * Sets the value of the search field, if it exists.
- * @param {string} value
- */
- setValue: function(value) {
- var searchInput = this.getSearchInput_();
- if (searchInput)
- searchInput.value = value;
- },
-
- /** @param {SearchFieldDelegate} delegate */
- setDelegate: function(delegate) {
- this.delegate_ = delegate;
- },
-
- /** @return {Promise<boolean>} */
- showAndFocus: function() {
- this.showingSearch_ = true;
- return this.focus_();
- },
-
- /**
- * @return {Promise<boolean>}
- * @private
- */
- focus_: function() {
- return new Promise(function(resolve) {
- this.async(function() {
- if (this.showingSearch_) {
- var searchInput = this.getSearchInput_();
- if (searchInput)
- searchInput.focus();
- }
- resolve(this.showingSearch_);
- });
- }.bind(this));
- },
-
- /**
- * @return {?Element}
- * @private
- */
- getSearchInput_: function() {
- return this.$$('#search-input');
- },
-
- /** @private */
- onSearchTermSearch_: function() {
- if (this.delegate_)
- this.delegate_.onSearchTermSearch(this.getValue());
- },
-
- /** @private */
- onSearchTermKeydown_: function(e) {
- if (e.keyIdentifier == 'U+001B') // Escape.
- this.showingSearch_ = false;
- },
-
- /** @private */
- showingSearchChanged_: function() {
- if (this.showingSearch_) {
- this.focus_();
- return;
- }
-
- var searchInput = this.getSearchInput_();
- if (!searchInput)
- return;
-
- searchInput.value = '';
- this.onSearchTermSearch_();
- },
-
- /** @private */
- toggleShowingSearch_: function() {
- this.showingSearch_ = !this.showingSearch_;
- },
+ behaviors: [CrSearchFieldBehavior]
});
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
diff --git a/chrome/browser/resources/md_downloads/toolbar.css b/chrome/browser/resources/md_downloads/toolbar.css
index 0437ef8..bb27d9f 100644
--- a/chrome/browser/resources/md_downloads/toolbar.css
+++ b/chrome/browser/resources/md_downloads/toolbar.css
@@ -21,7 +21,7 @@
}
#actions {
- color: rgb(176, 190, 197);
+ color: rgba(255, 255, 255, 0.9);
display: flex;
flex: none;
width: var(--downloads-item-width);
@@ -37,7 +37,7 @@
#actions paper-button {
--paper-button-flat-keyboard-focus: {
- color: white;
+ color: rgba(255, 255, 255, 1);
};
}
diff --git a/chrome/browser/resources/md_downloads/vulcanized.html b/chrome/browser/resources/md_downloads/vulcanized.html
index 09a4485..7433077 100644
--- a/chrome/browser/resources/md_downloads/vulcanized.html
+++ b/chrome/browser/resources/md_downloads/vulcanized.html
@@ -24,10 +24,12 @@
* 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);
+ /* This is a custom, Chrome-specific color that does not have a --paper or
+ * --google equivalent. */
+ --md-background-color: rgb(241, 241, 241);
+ /* This is --google-blue-700, rewritten as a native custom property for speed.
+ */
+ --md-toolbar-color: rgb(51, 103, 214);
}
</style>
@@ -2409,14 +2411,18 @@
justify-content: flex-end;
}
-:host paper-input-container {
+[hidden] {
+ display: none !important;
+}
+
+paper-input-container {
margin-top: 2px;
max-width: 200px;
padding: 2px 0;
width: 100%;
}
-#search-term {
+#searchTerm {
--paper-input-container-color: rgb(192, 199, 205);
--paper-input-container-focus-color: rgb(192, 199, 205);
--paper-input-container-input: {
@@ -2429,13 +2435,13 @@
z-index: 0;
}
-#search-term input[type='search']::-webkit-search-decoration,
-#search-term input[type='search']::-webkit-search-cancel-button,
-#search-term input[type='search']::-webkit-search-results-button {
+#searchTerm input[type='search']::-webkit-search-decoration,
+#searchTerm input[type='search']::-webkit-search-cancel-button,
+#searchTerm input[type='search']::-webkit-search-results-button {
-webkit-appearance: none;
}
-#search-term input[type='search']::-webkit-search-cancel-button {
+#searchTerm input[type='search']::-webkit-search-cancel-button {
display: block;
width: 20px;
}
@@ -2450,7 +2456,7 @@
};
}
-#search-term paper-icon-button {
+#searchTerm paper-icon-button {
--iron-icon-height: 16px;
--iron-icon-width: 16px;
--paper-icon-button: {
@@ -2465,19 +2471,17 @@
z-index: 1;
}
-:host-context([dir='rtl']) #search-term paper-icon-button {
+:host-context([dir='rtl']) #searchTerm paper-icon-button {
left: 0;
right: auto;
}
</style>
- <paper-icon-button icon="cr:search" id="search-button" disabled$="[[showingSearch_]]" title="[[label]]" on-click="toggleShowingSearch_"></paper-icon-button>
- <template is="dom-if" if="[[showingSearch_]]" id="search-container">
- <paper-input-container id="search-term" on-search="onSearchTermSearch_" on-keydown="onSearchTermKeydown_" hidden$="[[!showingSearch_]]" no-label-float="">
- <input is="iron-input" id="search-input" type="search" placeholder="[[label]]" incremental="">
- <paper-icon-button icon="cr:cancel" id="clear-search" on-click="toggleShowingSearch_" title="[[clearLabel]]" hidden$="[[!showingSearch_]]"></paper-icon-button>
- </paper-input-container>
- </template>
+ <paper-icon-button icon="cr:search" id="searchButton" disabled$="[[showingSearch]]" title="[[label]]" on-click="toggleShowingSearch_"></paper-icon-button>
+ <paper-input-container id="searchTerm" on-search="onSearchTermSearch_" on-keydown="onSearchTermKeydown_" hidden$="[[!showingSearch]]" no-label-float="">
+ <input is="iron-input" id="searchInput" type="search" placeholder="[[label]]" incremental="">
+ <paper-icon-button icon="cr:cancel" id="clearSearch" on-click="toggleShowingSearch_" title="[[clearLabel]]" hidden$="[[!showingSearch]]"></paper-icon-button>
+ </paper-input-container>
</template>
</dom-module>
@@ -2506,7 +2510,7 @@
}
#actions {
- color: rgb(176, 190, 197);
+ color: rgba(255, 255, 255, 0.9);
display: flex;
flex: none;
width: var(--downloads-item-width);
@@ -2522,7 +2526,7 @@
#actions paper-button {
--paper-button-flat-keyboard-focus: {
- color: white;
+ color: rgba(255, 255, 255, 1);
};
}
@@ -2648,10 +2652,12 @@
* 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);
+ /* This is a custom, Chrome-specific color that does not have a --paper or
+ * --google equivalent. */
+ --md-background-color: rgb(241, 241, 241);
+ /* This is --google-blue-700, rewritten as a native custom property for speed.
+ */
+ --md-toolbar-color: rgb(51, 103, 214);
}
</style>
diff --git a/chrome/browser/resources/md_history/app.html b/chrome/browser/resources/md_history/app.html
index cae5526..d56a893 100644
--- a/chrome/browser/resources/md_history/app.html
+++ b/chrome/browser/resources/md_history/app.html
@@ -7,11 +7,16 @@
<link rel="import" href="chrome://history/synced_device_manager.html">
<link rel="import" href="chrome://history/side_bar.html">
<link rel="import" href="chrome://history/shared_style.html">
+<link rel="stylesheet" href="chrome://resources/css/md_colors.css">
<dom-module id="history-app">
<!-- TODO(calamity): work around this deprecated import style -->
- <link rel="import" type="css" href="chrome://resources/css/md_colors.css">
<template>
+ <style no-process>
+ history-toolbar {
+ background: var(--md-toolbar-color);
+ }
+ </style>
<style include="shared-style">
:host {
display: flex;
@@ -36,10 +41,6 @@
flex: 1 0 0;
overflow: hidden;
}
-
- history-toolbar {
- background: var(--md-toolbar-color);
- }
</style>
<history-toolbar id="toolbar" searching="[[queryState_.querying]]"
is-grouped-mode="{{grouped_}}"
diff --git a/ui/webui/resources/css/md_colors.css b/ui/webui/resources/css/md_colors.css
index afb4455..a7d22d6 100644
--- a/ui/webui/resources/css/md_colors.css
+++ b/ui/webui/resources/css/md_colors.css
@@ -3,8 +3,10 @@
* 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);
+ /* This is a custom, Chrome-specific color that does not have a --paper or
+ * --google equivalent. */
+ --md-background-color: rgb(241, 241, 241);
+ /* This is --google-blue-700, rewritten as a native custom property for speed.
+ */
+ --md-toolbar-color: rgb(51, 103, 214);
}
