WebUI Dark Mode: rework link and error colors on Extensions page
Pretty much everything should use --cr-link-color, which magically
changes based on light/dark mode.
There was also just a ton of duplicated a[href] rules, which I
instead added to shared_style.html (and verified each place I
deleted from used include="shared-style").
Screenshots: https://imgur.com/a/kaT6MJc
R=dpapad@chromium.org
BUG=883049
Change-Id: I00440e1bcfaae21b31763f51d65385729ba7fab9
Reviewed-on: https://chromium-review.googlesource.com/c/1429379
Commit-Queue: Dan Beam (slow until 1/29) <dbeam@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Auto-Submit: Dan Beam (slow until 1/29) <dbeam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#625386}diff --git a/chrome/browser/resources/md_extensions/detail_view.html b/chrome/browser/resources/md_extensions/detail_view.html
index b4ed12f..fd79444 100644
--- a/chrome/browser/resources/md_extensions/detail_view.html
+++ b/chrome/browser/resources/md_extensions/detail_view.html
@@ -24,6 +24,7 @@
<link rel="import" href="navigation_helper.html">
<link rel="import" href="runtime_host_permissions.html">
<link rel="import" href="shared_style.html">
+<link rel="import" href="shared_vars.html">
<link rel="import" href="strings.html">
<link rel="import" href="toggle_row.html">
@@ -31,7 +32,7 @@
<template>
<style include="iron-flex cr-shared-style cr-icons action-link paper-button-style shared-style">
:host {
- --iron-icon-fill-color: var(--google-grey-refresh-700);
+ --iron-icon-fill-color: var(--cr-secondary-text-color);
display: block;
height: 100%;
}
@@ -53,6 +54,10 @@
color: var(--google-blue-500);
}
+ :host-context([dark]) #enable-section .enabled-text {
+ color: var(--google-blue-refresh-300);
+ }
+
#icon {
height: 24px;
margin-inline-end: 12px;
@@ -65,11 +70,6 @@
@apply --cr-title-text;
}
- #learn-more-link {
- color: var(--google-blue-700);
- text-decoration: none;
- }
-
.section {
@apply --cr-section;
}
@@ -102,27 +102,26 @@
}
.inspectable-view {
- color: var(--google-blue-700);
height: 20px;
width: auto; /* override the default button size of 24x24 */
}
- .warning .action-button {
+ :host-context(html:not([dark])) .warning .action-button {
background: white;
color: var(--google-blue-500);
}
- #reload-button {
+ :host-context(html:not([dark])) #reload-button {
color: var(--google-blue-500);
}
.warning span {
- color: var(--google-red-700);
+ color: var(--error-color);
flex: 1;
}
.warning-icon {
- --iron-icon-fill-color: var(--google-red-700);
+ --iron-icon-fill-color: var(--error-color);
flex-shrink: 0;
height: 18px;
margin-inline-end: 8px;
@@ -180,7 +179,7 @@
<span id="name">[[data.name]]</span>
</div>
<div class="section continuation control-line" id="enable-section">
- <span class$="{{computeEnabledStyle_(data.state)}}">
+ <span class$="[[computeEnabledStyle_(data.state)]]">
[[computeEnabledText_(data.state, '$i18nPolymer{itemOn}',
'$i18nPolymer{itemOff}')]]
</span>
@@ -222,8 +221,7 @@
<iron-icon class="warning-icon" icon="cr:warning"></iron-icon>
<span>
$i18n{itemSuspiciousInstall}
- <a target="_blank" id="learn-more-link"
- href="$i18n{suspiciousInstallHelpUrl}">
+ <a target="_blank" href="$i18n{suspiciousInstallHelpUrl}">
$i18n{learnMore}
</a>
</span>
diff --git a/chrome/browser/resources/md_extensions/error_page.html b/chrome/browser/resources/md_extensions/error_page.html
index 80747fc..04a4688 100644
--- a/chrome/browser/resources/md_extensions/error_page.html
+++ b/chrome/browser/resources/md_extensions/error_page.html
@@ -34,11 +34,12 @@
}
iron-icon[icon='cr:warning'] {
+ /* TODO(dbeam): find dark mode equivalent for this orange. */
--iron-icon-fill-color: var(--paper-orange-500);
}
iron-icon[icon='cr:error'] {
- --iron-icon-fill-color: var(--paper-red-700);
+ --iron-icon-fill-color: var(--error-color);
}
.section {
diff --git a/chrome/browser/resources/md_extensions/host_permissions_toggle_list.html b/chrome/browser/resources/md_extensions/host_permissions_toggle_list.html
index 8d5f710..56126ec 100644
--- a/chrome/browser/resources/md_extensions/host_permissions_toggle_list.html
+++ b/chrome/browser/resources/md_extensions/host_permissions_toggle_list.html
@@ -20,11 +20,6 @@
margin-top: 12px;
}
- a[href] {
- color: var(--google-blue-700);
- text-decoration: none;
- }
-
extensions-toggle-row {
color: black;
}
diff --git a/chrome/browser/resources/md_extensions/item.html b/chrome/browser/resources/md_extensions/item.html
index be6dcbf..569b4c3 100644
--- a/chrome/browser/resources/md_extensions/item.html
+++ b/chrome/browser/resources/md_extensions/item.html
@@ -14,6 +14,8 @@
<link rel="import" href="icons.html">
<link rel="import" href="item_behavior.html">
<link rel="import" href="item_util.html">
+<link rel="import" href="shared_style.html">
+<link rel="import" href="shared_vars.html">
<link rel="import" href="strings.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
@@ -23,8 +25,7 @@
<dom-module id="extensions-item">
<template>
- <style include=
- "iron-flex cr-hidden-style cr-icons action-link paper-button-style">
+ <style include="iron-flex cr-hidden-style cr-icons action-link paper-button-style shared-style">
.bounded-text,
.multiline-clippable-text,
.clippable-flex-text {
@@ -102,13 +103,13 @@
}
#warnings {
- color: var(--google-red-700);
+ color: var(--error-color);
flex: 1;
margin-bottom: 8px;
}
#error-icon {
- --iron-icon-fill-color: var(--google-red-700);
+ --iron-icon-fill-color: var(--error-color);
height: 18px;
margin-inline-end: 4px;
width: 18px;
@@ -148,11 +149,6 @@
margin-inline-start: 8px;
}
- #learn-more-link {
- color: var(--google-blue-700);
- text-decoration: none;
- }
-
#source-indicator {
margin-inline-start: 24px;
margin-top: 24px;
@@ -184,12 +180,8 @@
};
}
- .action-button {
- color: var(--google-blue-500);
- }
-
#errors-button {
- color: var(--google-red-700);
+ color: var(--error-color);
}
#dev-reload-button-container {
@@ -270,8 +262,7 @@
<span id="suspicious-warning" aria-describedby="a11yAssociation"
hidden$="[[!data.disableReasons.suspiciousInstall]]">
$i18n{itemSuspiciousInstall}
- <a target="_blank" id="learn-more-link"
- href="$i18n{suspiciousInstallHelpUrl}">
+ <a target="_blank" href="$i18n{suspiciousInstallHelpUrl}">
$i18n{learnMore}
</a>
</span>
diff --git a/chrome/browser/resources/md_extensions/runtime_host_permissions.html b/chrome/browser/resources/md_extensions/runtime_host_permissions.html
index 2d807a7af..9eaad24 100644
--- a/chrome/browser/resources/md_extensions/runtime_host_permissions.html
+++ b/chrome/browser/resources/md_extensions/runtime_host_permissions.html
@@ -63,11 +63,6 @@
cr-radio-button.multi-row {
align-items: normal;
}
-
- a[href] {
- color: var(--google-blue-700);
- text-decoration: none;
- }
</style>
<div id="permissions-mode">
<div id="section-heading">
diff --git a/chrome/browser/resources/md_extensions/shared_style.html b/chrome/browser/resources/md_extensions/shared_style.html
index 2e216b6..b6f3208 100644
--- a/chrome/browser/resources/md_extensions/shared_style.html
+++ b/chrome/browser/resources/md_extensions/shared_style.html
@@ -4,6 +4,11 @@
<dom-module id="shared-style">
<template>
<style include="cr-shared-style">
+ a[href] {
+ color: var(--cr-link-color);
+ text-decoration: none;
+ }
+
.page-container {
height: 100%;
overflow: overlay;
diff --git a/chrome/browser/resources/md_extensions/shared_vars.html b/chrome/browser/resources/md_extensions/shared_vars.html
index 44c5c59..ad311071 100644
--- a/chrome/browser/resources/md_extensions/shared_vars.html
+++ b/chrome/browser/resources/md_extensions/shared_vars.html
@@ -1,9 +1,19 @@
<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
+
<custom-style>
<style is="custom-style">
html {
+ /* Note: error-color is used for many warnings. There's also an orange-y
+ * warning color in 1 place. */
+ --error-color: var(--google-red-700);
--separator-gap: 9px;
}
+
+ html[dark] {
+ --error-color: var(--google-red-refresh-300);
+ }
</style>
</custom-style>
diff --git a/chrome/browser/resources/md_extensions/sidebar.html b/chrome/browser/resources/md_extensions/sidebar.html
index e4eb819..8aaf1ef 100644
--- a/chrome/browser/resources/md_extensions/sidebar.html
+++ b/chrome/browser/resources/md_extensions/sidebar.html
@@ -11,7 +11,6 @@
<template>
<style include="cr-icons">
:host {
- --selected-color: var(--google-blue-700);
--sidebar-inactive-color: #5a5a5a;
color: var(--sidebar-inactive-color);
display: flex;
@@ -24,12 +23,11 @@
}
:host-context([dark]) {
- --selected-color: var(--google-blue-refresh-300);
--sidebar-inactive-color: var(--cr-primary-text-color);
}
iron-selector .iron-selected {
- color: var(--selected-color);
+ color: var(--cr-link-color);
}
#sectionMenu {
