[Controls Refresh] Update colors for color picker in dark mode.

Prior to this CL, the popup border, control's border and background color for color picker popup don't match spec. In addition, the suggested color picker popup wasn't styled. Updated the colors for color picker. And added a test for suggested color picker. The suggested color picker swatch control uses outline to indicate both hover (mouse) and focus (keyboard), [1]. Thus, I kept the existing behavior of using outline. [1] https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/html/forms/resources/colorSuggestionPicker.js;l=202 Bug: 1111926 Change-Id: Ib0608a85e6e2f276cff45446a7bac11e9726040a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2336290 Commit-Queue: Yu Han <yuzhehan@chromium.org> Reviewed-by: Mason Freed <masonfreed@chromium.org> Cr-Commit-Position: refs/heads/master@{#795599}

[Controls Refresh] Update colors for color picker in dark mode.
Prior to this CL, the popup border, control's border and background color for color picker popup don't match spec. In addition, the suggested color picker popup wasn't styled. Updated the colors for color picker. And added a test for suggested color picker. The suggested color picker swatch control uses outline to indicate both hover (mouse) and focus (keyboard), [1]. Thus, I kept the existing behavior of using outline. [1] https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/html/forms/resources/colorSuggestionPicker.js;l=202 Bug: 1111926 Change-Id: Ib0608a85e6e2f276cff45446a7bac11e9726040a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2336290 Commit-Queue: Yu Han <yuzhehan@chromium.org> Reviewed-by: Mason Freed <masonfreed@chromium.org> Cr-Commit-Position: refs/heads/master@{#795599}
12224dd9 · Yu Han · Commit Bot · fc7b0cb4 · 12224dd9 · 12224dd9
Commit 12224dd9 authored Aug 06, 2020 by Yu Han Committed by Commit Bot Aug 06, 2020
9 changed files
--- a/third_party/blink/renderer/core/html/forms/resources/colorSuggestionPicker.css
+++ b/third_party/blink/renderer/core/html/forms/resources/colorSuggestionPicker.css
@@ -147,6 +147,38 @@ body.controls-refresh {
        forced-color-adjust: none;
    }
+    .controls-refresh .color-swatch-container::-webkit-scrollbar-thumb {
+        background-color: WindowText;
+    }
+}
+@media (prefers-color-scheme: dark) {
+    .controls-refresh .color-suggestion-picker-main {
+        background: #3B3B3B;
+        color: #FFFFFF;
+        border: 1px solid #858585;
+        box-shadow: none;
+    }
+    .controls-refresh .color-swatch {
+        border-color: #858585;
+    }
+    .controls-refresh .color-swatch:focus {
+        outline-color: Highlight;
+    }
+    .controls-refresh .other-color,
+    .controls-refresh .other-color:hover {
+        background: #3B3B3B;
+        color: #FFFFFF;
+        border: 1px solid #858585;
+    }
+    .controls-refresh .other-color:hover{
+        border: 1px solid #ACACAC;
+    }
    .controls-refresh .color-swatch-container::-webkit-scrollbar-thumb {
        background-color: WindowText;
    }

--- a/third_party/blink/renderer/core/html/forms/resources/color_picker.css
+++ b/third_party/blink/renderer/core/html/forms/resources/color_picker.css
@@ -215,9 +215,9 @@ channel-label {
 @media (prefers-color-scheme: dark) {
  color-picker {
-    background: #4A4A4A;
+    background: #3B3B3B;
    color: #FFFFFF;
-    border: 1px solid #000000;
+    border: 1px solid #858585;
  }
  format-toggler:hover {
@@ -225,13 +225,16 @@ channel-label {
  }
  input {
-    background: #4A4A4A;
+    background: #3B3B3B;
    color: #FFFFFF;
-    border: 1px solid #FFFFFF;
+    border: 1px solid #858585;
+  }
+  input:hover {
+    border: 1px solid #ACACAC;
  }
  .up-down-icon path {
    fill: #FFFFFF;
  }
 }
\ No newline at end of file
--- a/third_party/blink/web_tests/platform/linux/virtual/dark-color-scheme/color/color-picker-appearance-basic-expected.png
+++ b/third_party/blink/web_tests/platform/linux/virtual/dark-color-scheme/color/color-picker-appearance-basic-expected.png
--- a/third_party/blink/web_tests/platform/linux/virtual/dark-color-scheme/color/color-picker-suggestion-appearance-expected.png
+++ b/third_party/blink/web_tests/platform/linux/virtual/dark-color-scheme/color/color-picker-suggestion-appearance-expected.png
--- a/third_party/blink/web_tests/platform/mac/virtual/dark-color-scheme/color/color-picker-appearance-basic-expected.png
+++ b/third_party/blink/web_tests/platform/mac/virtual/dark-color-scheme/color/color-picker-appearance-basic-expected.png
--- a/third_party/blink/web_tests/platform/mac/virtual/dark-color-scheme/color/color-picker-suggestion-appearance-expected.png
+++ b/third_party/blink/web_tests/platform/mac/virtual/dark-color-scheme/color/color-picker-suggestion-appearance-expected.png
--- a/third_party/blink/web_tests/platform/win/virtual/dark-color-scheme/color/color-picker-appearance-basic-expected.png
+++ b/third_party/blink/web_tests/platform/win/virtual/dark-color-scheme/color/color-picker-appearance-basic-expected.png
--- a/third_party/blink/web_tests/platform/win/virtual/dark-color-scheme/color/color-picker-suggestion-appearance-expected.png
+++ b/third_party/blink/web_tests/platform/win/virtual/dark-color-scheme/color/color-picker-suggestion-appearance-expected.png
--- a/third_party/blink/web_tests/virtual/dark-color-scheme/color/color-picker-suggestion-appearance.html
+++ b/third_party/blink/web_tests/virtual/dark-color-scheme/color/color-picker-suggestion-appearance.html
+<!DOCTYPE html>
+<html>
+<meta name="color-scheme" content="dark">
+<head>
+  <script>
+    testRunner.waitUntilDone();
+  </script>
+  <script src='../../../fast/forms/resources/picker-common.js'></script>
+</head>
+<body>
+  <input type='color' id='color' list="colorslist">
+  <datalist id="colorslist">
+    <option value="#00ffff"/>
+    <option value="#ff00ff"/>
+    <option value="#ffff00"/>
+    <option value="#ffaa00"/>
+  </datalist>
+  <script>
+    openPickerAppearanceOnly(color, () => testRunner.notifyDone(), () => testRunner.notifyDone());
+  </script>
+</body>
+</html>
\ No newline at end of file