[cr-customize-themes] Update layout of the color picker icon

There is a couple of bugs related to the color picker <div> having
`position: relative`. This CL removes `position: relative` from the
top-level div and adds a nested div with `position: relative` to place
the color picker icon and a hidden input element on top of it.

Fixed: 1162053, 1161660
Change-Id: I1e856bb58a3508bc2deb9ce84487ea7a8cb95d34
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2611274Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Commit-Queue: Alex Ilin <alexilin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#840977}

ui/webui/resources/cr_components/customize_themes/customize_themes.html

@@ -68,18 +68,21 @@
   }
 
   #autogeneratedThemeContainer {
-    display: flex;
-    flex-direction: column;
     position: relative;
   }
 
+  /* colorPicker is placed on top of the theme icon to work around
+     https://crbug.com/1162053 */
   #colorPicker {
     border: 0;
-    height: 0;
+    height: var(--cr-customize-themes-icon-size);
+    left: 0;
     margin: 0;
     padding: 0;
+    position: absolute;
+    top: 0;
     visibility: hidden;
-    width: 0;
+    width: var(--cr-customize-themes-icon-size);
   }
 
   #colorPickerIcon {
@@ -144,16 +147,17 @@
   </div>
 </div>
 <cr-grid id="themesContainer" columns="6" role="radiogroup">
-  <div id="autogeneratedThemeContainer"
-      aria-label="[[i18n('colorPickerLabel')]]"
+  <div aria-label="[[i18n('colorPickerLabel')]]"
       tabindex="0" on-click="onAutogeneratedThemeClick_" role="radio"
       aria-checked$="[[getThemeIconCheckedStatus_('autogenerated', selectedTheme)]]">
-    <cr-theme-icon id="autogeneratedTheme"
-        selected$="[[isThemeIconSelected_('autogenerated', selectedTheme)]]">
-    </cr-theme-icon>
-    <div id="colorPickerIcon"></div>
-    <input id="colorPicker" type="color" on-change="onCustomFrameColorChange_">
-    </input>
+    <div id="autogeneratedThemeContainer">
+      <cr-theme-icon id="autogeneratedTheme"
+          selected$="[[isThemeIconSelected_('autogenerated', selectedTheme)]]">
+      </cr-theme-icon>
+      <div id="colorPickerIcon"></div>
+      <input id="colorPicker" type="color"
+          on-change="onCustomFrameColorChange_">
+    </div>
     <paper-tooltip offset="0" fit-to-visible-bounds>
       [[i18n('colorPickerLabel')]]
     </paper-tooltip>