Color popup UI polish.

This CL fixes some fit-and-finish issues for the color picker:
- hue slider should be 12px
- focus ring for the color-selection-ring should follow border radius
- increase the margin between the input controls

Bug: 1041686
Change-Id: I75fed1b4b1ae5fd5ccd979231bc5b166ef6e9616
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2098995
Commit-Queue: Ionel Popescu <iopopesc@microsoft.com>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/master@{#749490}

third_party/blink/renderer/core/html/forms/resources/color_picker.css

@@ -67,7 +67,7 @@ color-well > canvas {
 
 hue-slider > canvas {
   border-radius: 2px;
-  height: 11px;
+  height: 12px;
   margin-top: 7%;
   width: 100%;
 }
@@ -80,6 +80,15 @@ color-selection-ring {
   position: absolute;
 }
 
+color-selection-ring:focus {
+  /* Simulate the outline using box-shadow because it follows the border radius
+   * (unlike outline).
+   */
+  box-shadow: 0px 0px 0px 2px;
+  color: -webkit-focus-ring-color;
+  outline: none;
+}
+
 color-well > color-selection-ring {
   height: 12px;
   width: 12px;
@@ -123,7 +132,7 @@ input {
 }
 
 color-value-container > input:not(:first-child) {
-  margin-left: 1%;
+  margin-left: 4%;
 }
 
 format-toggler {