WebUI: Remove pre-CR2023 code in a c/b/r/compose/.
Bug: 326116364
Change-Id: Ic216f0abac3d5736d3dc6d50b9d27b80bbec463b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5468383
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Auto-Submit: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1290788}
diff --git a/chrome/browser/resources/compose/app.html b/chrome/browser/resources/compose/app.html
index a2d3514e..0ea1d8a3 100644
--- a/chrome/browser/resources/compose/app.html
+++ b/chrome/browser/resources/compose/app.html
@@ -11,10 +11,6 @@
}
a {
- color: var(--cr-link-color);
- }
-
- :host-context([chrome-refresh-2023]) a {
color: var(--color-compose-dialog-link);
}
@@ -54,28 +50,14 @@
min-width: 48px;
height: 48px;
border-radius: 12px;
- background: linear-gradient(
- 136deg, rgb(211, 227, 253) 1.59%, rgb(231, 248, 237) 100%);
- color: rgb(4, 30, 73);
- display: flex;
- justify-content: center;
- align-items: center;
- transform-origin: top left;
- }
-
- @media (prefers-color-scheme: dark) {
- #firstRunIconContainer {
- background: linear-gradient(
- 136deg, rgb(8, 66, 160) 1.59%, rgb(15, 82, 35) 100%);
- color: rgb(194, 231, 255);
- }
- }
-
- :host-context([chrome-refresh-2023]) #firstRunIconContainer {
background: linear-gradient(136deg,
var(--color-sys-gradient-primary) 1.59%,
var(--color-sys-gradient-tertiary) 100%);
color: var(--color-compose-dialog-logo);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transform-origin: top left;
}
#firstRunHeading iron-icon {
@@ -112,30 +94,18 @@
}
h1 {
- color: var(--cr-primary-text-color);
+ color: var(--color-compose-dialog-title);
font-size: 16px;
font-weight: 500;
line-height: 24px;
margin: 0;
margin-inline-end: auto;
- padding-inline-end: 36px; /* From --cr-icon-button-size */
- }
-
- :host-context([chrome-refresh-2023]) h1 {
- color: var(--color-compose-dialog-title);
- font-size: 16px;
- font-weight: 500;
- line-height: 24px;
padding-inline-end: 32px; /* From --cr-icon-button-size */
}
cr-icon-button {
- --cr-icon-button-fill-color: var(--cr-secondary-text-color);
- margin: 0;
- }
-
- :host-context([chrome-refresh-2023]) cr-icon-button {
--cr-icon-button-fill-color: var(--color-compose-dialog-foreground-subtle);
+ margin: 0;
}
#bodyAndFooter {
@@ -147,7 +117,7 @@
}
#body {
- --results-background_: rgb(234, 240, 249);
+ --results-background_: var(--color-compose-dialog-result-background);
box-sizing: border-box;
grid-area: body;
display: grid;
@@ -157,21 +127,11 @@
padding: 0 20px;
}
- @media (prefers-color-scheme: dark) {
- #body {
- --results-background_: rgb(60, 64, 67);
- }
- }
-
:host(:not([submitted_])) #body {
/* Non-submitted dialog has no bodyContent. */
grid-template-areas: "textarea";
}
- :host-context([chrome-refresh-2023]) #body {
- --results-background_: var(--color-compose-dialog-result-background);
- }
-
/* Set scroll-related styles if UI refinements are not enabled. */
:host(:not([enable-ui-refinements])) #body {
--scrollbar-width_: 4px;
@@ -181,21 +141,11 @@
}
:host(:not([enable-ui-refinements])) #body.is-scrolled {
- border-top: var(--cr-hairline);
- }
-
- :host(:not([enable-ui-refinements])) :host-context([chrome-refresh-2023])
- #body.is-scrolled {
border-top: solid 1px var(--color-compose-dialog-divider);
}
:host(:not([enable-ui-refinements]))
#body.can-scroll:not(.scrolled-to-bottom) {
- border-bottom: var(--cr-hairline);
- }
-
- :host(:not([enable-ui-refinements])) :host-context([chrome-refresh-2023])
- #body.can-scroll:not(.scrolled-to-bottom) {
border-bottom: solid 1px var(--color-compose-dialog-divider);
}
@@ -216,17 +166,6 @@
#body::-webkit-scrollbar-thumb,
#resultTextContainer::-webkit-scrollbar-thumb {
- background: var(--google-grey-300);
- }
-
- @media (prefers-color-scheme: dark) { #body::-webkit-scrollbar-thumb,
- #resultTextContainer::-webkit-scrollbar-thumb {
- background: var(--google-grey-500);
- }
- }
-
- :host-context([chrome-refresh-2023]) #body::-webkit-scrollbar-thumb,
- #resultTextContainer::-webkit-scrollbar-thumb {
background: var(--color-compose-dialog-scrollbar-thumb);
}
@@ -256,28 +195,22 @@
}
.result-container {
- --compose-result-text-color-while-loading: var(--cr-primary-text-color);
- --compose-result-text-color: var(--cr-primary-text-color);
+ --compose-result-text-color-while-loading: var(
+ --color-compose-dialog-result-foreground-while-loading);
+ --compose-result-text-color: var(--color-compose-dialog-result-foreground);
border-radius: 8px;
display: flex;
box-sizing: border-box;
background: var(--results-background_);
color: var(--cr-primary-text-color);
font-size: 12px;
- line-height: 20px;
+ line-height: 16px;
}
:host([enable-ui-refinements][is-editing-result-text_]) .result-container {
outline: solid 2px var(--cr-focus-outline-color);
}
- :host-context([chrome-refresh-2023]) .result-container {
- --compose-result-text-color-while-loading: var(
- --color-compose-dialog-result-foreground-while-loading);
- --compose-result-text-color: var(--color-compose-dialog-result-foreground);
- line-height: 16px;
- }
-
#resultContainerInner {
display: flex;
flex-direction: column;
@@ -349,10 +282,6 @@
color: var(--cr-secondary-text-color);
}
- :host-context(html:not([chrome-refresh-2023])) #resultOptions .md-select {
- border: solid 1px var(--google-grey-400);
- }
-
.icon-buttons-row {
display: grid;
grid-auto-columns: var(--cr-icon-size);
@@ -370,18 +299,14 @@
}
.icon-buttons-row cr-icon-button {
- --cr-icon-button-fill-color: var(--cr-secondary-text-color);
+ --cr-icon-button-fill-color: var(--color-compose-dialog-result-icon);
--cr-icon-button-icon-size: var(--cr-icon-size);
margin: 0;
}
- :host-context([chrome-refresh-2023]) .icon-buttons-row cr-icon-button {
- --cr-icon-button-fill-color: var(--color-compose-dialog-result-icon);
- }
-
/* cr-button is only used when UI refinements is enabled */
.icon-buttons-row cr-button {
- --cr-button-text-color: var(--cr-secondary-text-color);
+ --cr-button-text-color: var(--color-compose-dialog-result-icon);
margin: 0;
padding: 0;
min-height: 24px;
@@ -390,10 +315,6 @@
gap: 4px;
}
- :host-context([chrome-refresh-2023]) .icon-buttons-row cr-button {
- --cr-button-text-color: var(--color-compose-dialog-result-icon);
- }
-
/* Vertical divider between buttons */
:host([enable-ui-refinements]) .icon-buttons-row
.button-container:last-child {
@@ -434,7 +355,7 @@
align-items: start;
gap: 8px;
margin-inline-end: auto;
- color: var(--cr-secondary-text-color);
+ color: var(--color-compose-dialog-foreground-subtle);
font-size: 11px;
line-height: 16px;
}
@@ -451,11 +372,6 @@
}
</if>
- :host-context([chrome-refresh-2023]) .footer-text {
- color: var(--color-compose-dialog-foreground-subtle);
- line-height: 16px;
- }
-
.footer-text .icon-buttons-row {
--cr-icon-size: 16px;
margin-inline-end: 8px;
@@ -488,8 +404,7 @@
min-height: 153px;
}
- :host-context([chrome-refresh-2023], [is-editing-submitted-input_])
- #bodyAndFooter {
+ :host-context([is-editing-submitted-input_]) #bodyAndFooter {
min-height: 141px;
}
diff --git a/chrome/browser/resources/compose/compose.html b/chrome/browser/resources/compose/compose.html
index 78d6034..232e605 100644
--- a/chrome/browser/resources/compose/compose.html
+++ b/chrome/browser/resources/compose/compose.html
@@ -1,10 +1,8 @@
<!DOCTYPE html>
-<html dir="$i18n{textdirection}" lang="$i18n{language}"
- $i18n{chromeRefresh2023Attribute}>
+<html dir="$i18n{textdirection}" lang="$i18n{language}">
<head>
<meta charset="utf-8">
<title>Compose</title>
- <link rel="stylesheet" href="//resources/css/md_colors.css">
<link rel="stylesheet" href="//resources/css/text_defaults_md.css">
<link rel="stylesheet" href="//theme/colors.css?sets=ui,chrome">
<style>
@@ -15,13 +13,7 @@
overflow: hidden;
}
- @media (prefers-color-scheme: dark) {
- html {
- background-color: var(--md-background-color);
- }
- }
-
- html[chrome-refresh-2023] {
+ html {
background: var(--color-compose-dialog-background);
}
</style>
diff --git a/chrome/browser/resources/compose/textarea.html b/chrome/browser/resources/compose/textarea.html
index c59c8b21d..1dcd517 100644
--- a/chrome/browser/resources/compose/textarea.html
+++ b/chrome/browser/resources/compose/textarea.html
@@ -5,7 +5,8 @@
--compose-textarea-input-padding: 10px;
--compose-textarea-readonly-height: 48px;
--compose-textarea-readonly-padding: 16px;
- --compose-textarea-readonly-background: var(--google-grey-100);
+ --compose-textarea-readonly-background:
+ var(--color-compose-dialog-textarea-readonly-background);
display: grid;
grid-template-areas: "content";
@@ -13,17 +14,6 @@
grid-auto-columns: 100%;
}
- @media (prefers-color-scheme: dark) {
- :host {
- --compose-textarea-readonly-background: rgba(53, 54, 58, 1);
- }
- }
-
- :host-context([chrome-refresh-2023]):host {
- --compose-textarea-readonly-background:
- var(--color-compose-dialog-textarea-readonly-background);
- }
-
#inputContainer,
#readonlyContainer {
grid-area: content;
@@ -41,13 +31,13 @@
appearance: none;
background: transparent;
border: none;
- outline: solid 1px var(--google-grey-300);
+ outline: solid 1px var(--color-compose-dialog-textarea-outline);
outline-offset: -1px;
border-radius: 8px;
- color: var(--cr-primary-text-color);
+ color: var(--color-compose-dialog-textarea);
font: inherit;
font-size: 12px;
- line-height: 20px;
+ line-height: 16px;
resize: none;
width: 100%;
height: var(--compose-textarea-input-height);
@@ -56,92 +46,40 @@
scroll-padding-block: 10px;
}
- @media (prefers-color-scheme: dark) {
- textarea {
- outline-color: var(--google-grey-500);
- }
- }
-
- :host-context([chrome-refresh-2023]) textarea {
- outline-color: var(--color-compose-dialog-textarea-outline);
- color: var(--color-compose-dialog-textarea);
- line-height: 16px;
- }
-
:host([readonly]) textarea {
overflow: hidden;
}
textarea::placeholder {
- color: var(--cr-secondary-text-color);
+ color: var(--color-compose-dialog-textarea-placeholder);
}
#input:focus::placeholder {
color: transparent;
}
- :host-context([chrome-refresh-2023]) textarea::placeholder {
- color: var(--color-compose-dialog-textarea-placeholder);
- }
-
:host([invalid-input_]) textarea {
- outline: solid 2px var(--google-red-600);
+ outline: solid 2px var(--color-compose-dialog-error);
outline-offset: -2px;
}
- @media (prefers-color-scheme: dark) {
- :host([invalid-input_]) textarea {
- outline-color: var(--google-red-300);
- }
- }
-
- :host-context([chrome-refresh-2023]):host([invalid-input_]) textarea {
- outline-color: var(--color-compose-dialog-error);
- }
-
.error {
margin: 4px 10px 0;
- color: var(--google-red-600);
+ color: var(--color-compose-dialog-error);
font-size: 11px;
line-height: 16px;
user-select: text;
}
- @media (prefers-color-scheme: dark) {
- .error {
- color: var(--google-red-300);
- }
- }
-
- :host-context([chrome-refresh-2023]) .error {
- color: var(--color-compose-dialog-error);
- }
-
textarea:focus {
outline: solid 2px var(--cr-focus-outline-color);
outline-offset: -2px;
}
- :host-context([chrome-refresh-2023]) textarea:focus {
- outline: solid 2px var(--cr-focus-outline-color);
- outline-offset: -2px;
- }
-
#readonlyContainer {
border-radius: 8px;
display: flex;
padding: 16px;
- background: var(--compose-textarea-readonly-background);
- color: var(--cr-primary-text-color);
- }
-
- @media (prefers-color-scheme: dark) {
- #readonlyContainer {
- background: rgba(53, 54, 58, 1);
- }
- }
-
- :host-context([chrome-refresh-2023]) #readonlyContainer {
background: var(--color-compose-dialog-textarea-readonly-background);
color: var(--color-compose-dialog-textarea-readonly-foreground);
}
@@ -149,7 +87,7 @@
#readonlyText {
font-size: 12px;
font-weight: 400;
- line-height: 20px;
+ line-height: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -157,11 +95,6 @@
user-select: text;
}
- :host-context([chrome-refresh-2023]) #readonlyText {
- font-size: 12px;
- line-height: 16px;
- }
-
#editButtonContainer {
--cr-icon-button-icon-size: var(--cr-icon-size);
width: var(--cr-icon-size);
