[webui-ntp] Add color picker icon to autogenerated theme icon

Bug: 1032327
Change-Id: I55c34b77eaffb7573ce8fb020d102b9286d945e7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1993624
Commit-Queue: Tibor Goldschwendt <tiborg@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#730045}

chrome/browser/resources/new_tab_page/customize_themes.html

@@ -60,16 +60,33 @@
     box-shadow: inset 0 0 0 2px rgba(var(--google-blue-600-rgb), .4);
   }
 
-  ntp-theme-icon {
+  #themesContainer > * {
     align-self: center;
     justify-self: center;
     outline-width: 0;
   }
 
-  :host-context(.focus-outline-visible) ntp-theme-icon:focus {
+  :host-context(.focus-outline-visible) #themesContainer > *:focus {
     box-shadow: 0 0 0 2px rgba(var(--google-blue-600-rgb), .4);
   }
 
+  #autogeneratedThemeContainer {
+    display: flex;
+    position: relative;
+  }
+
+  #colorPickerIcon {
+    -webkit-mask-image: url(icons/colorize.svg);
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: 100%;
+    background-color: var(--google-grey-refresh-700);
+    height: 20px;
+    left: calc(50% - 10px);
+    position: absolute;
+    top: calc(50% - 10px);
+    width: 20px;
+  }
+
   #autogeneratedTheme {
     --ntp-theme-icon-frame-color: var(--google-grey-refresh-100);
     --ntp-theme-icon-active-tab-color: white;
@@ -106,13 +123,15 @@
 </input>
 <div id="themesContainer" on-keydown="onThemesKeyDown_"
     style="--num-theme-columns: [[numThemeColumns_]];">
-  <!-- TODO(crbug.com/1032327): Add color picker icon. -->
-  <ntp-theme-icon id="autogeneratedTheme" title="$i18n{colorPickerLabel}"
-      on-click="onAutogeneratedThemeClick_"
-      selected$="[[isThemeIconSelected_('autogenerated', theme)]]">
-  </ntp-theme-icon>
+  <div id="autogeneratedThemeContainer" tabindex="0"
+      on-click="onAutogeneratedThemeClick_">
+    <ntp-theme-icon id="autogeneratedTheme" title="$i18n{colorPickerLabel}"
+        selected$="[[isThemeIconSelected_('autogenerated', theme)]]">
+    </ntp-theme-icon>
+    <div id="colorPickerIcon"></div>
+  </div>
   <ntp-theme-icon id="defaultTheme" title="$i18n{defaultThemeLabel}"
-      on-click="onDefaultThemeClick_"
+      on-click="onDefaultThemeClick_" tabindex="0"
       selected$="[[isThemeIconSelected_('default', theme)]]">
   </ntp-theme-icon>
   <dom-repeat id="themes" items="[[chromeThemes_]]">
@@ -122,6 +141,7 @@
               [[skColorToRgb_(item.colors.frame)]];
             --ntp-theme-icon-active-tab-color:
               [[skColorToRgb_(item.colors.activeTab)]];"
+          tabindex="0"
           selected$="[[isThemeIconSelected_(item.id, theme)]]">
       </ntp-theme-icon>
     </template>

chrome/browser/resources/new_tab_page/customize_themes.js

@@ -92,6 +92,8 @@ class CustomizeThemesElement extends PolymerElement {
         '--ntp-theme-icon-stroke-color', rgbFrameColor);
     this.$.autogeneratedTheme.style.setProperty(
         '--ntp-theme-icon-active-tab-color', rgbActiveTabColor);
+    this.$.colorPickerIcon.style.setProperty(
+        'background-color', skColorToRgb(this.theme.shortcutTextColor));
   }
 
   /**
@@ -158,8 +160,8 @@ class CustomizeThemesElement extends PolymerElement {
   onThemesKeyDown_(e) {
     if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
       e.preventDefault();
-      const themeIcons =
-          Array.from(this.$.themesContainer.querySelectorAll('ntp-theme-icon'));
+      const themeIcons = Array.from(this.shadowRoot.querySelectorAll(
+          '#themesContainer > :-webkit-any(div, ntp-theme-icon)'));
       const currentIndex = themeIcons.indexOf(e.target);
       const isRtl = window.getComputedStyle(this)['direction'] === 'rtl';
       let delta = 0;

chrome/browser/resources/new_tab_page/icons/colorize.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M17.66 5.41l.92.92-2.69 2.69-.92-.92 2.69-2.69M17.67 3c-.26 0-.51.1-.71.29l-3.12 3.12-1.93-1.91-1.41 1.41 1.42 1.42L3 16.25V21h4.75l8.92-8.92 1.42 1.42 1.41-1.41-1.92-1.92 3.12-3.12c.4-.4.4-1.03.01-1.42l-2.34-2.34c-.2-.19-.45-.29-.7-.29zM6.92 19L5 17.08l8.06-8.06 1.92 1.92L6.92 19z"/></svg>
\ No newline at end of file

chrome/browser/resources/new_tab_page/new_tab_page_resources.grd

@@ -43,6 +43,8 @@
           file="icons/backgrounds.svg" type="BINDATA" compress="gzip" />
       <include name="IDR_NEW_TAB_PAGE_COLORS_ICON_SVG"
           file="icons/colors.svg" type="BINDATA" compress="gzip" />
+      <include name="IDR_NEW_TAB_PAGE_COLORIZE_ICON_SVG"
+          file="icons/colorize.svg" type="BINDATA" compress="gzip" />
     </includes>
     <structures>
       <structure name="IDR_NEW_TAB_PAGE_NEW_TAB_PAGE_HTML"

chrome/browser/resources/new_tab_page/theme_icon.js

@@ -18,17 +18,6 @@ class ThemeIconElement extends PolymerElement {
   static get template() {
     return html`{__html_template__}`;
   }
-
-  static get properties() {
-    return {
-      /** @type {number} */
-      tabindex: {
-        type: Number,
-        reflectToAttribute: true,
-        value: 0,
-      },
-    };
-  }
 }
 
 customElements.define(ThemeIconElement.is, ThemeIconElement);

chrome/test/data/webui/new_tab_page/customize_themes_focus_test.js

@@ -16,8 +16,8 @@ suite('NewTabPageCustomizeThemesFocusTest', () => {
   let testProxy;
 
   function queryThemeIcons() {
-    return customizeThemes.shadowRoot.querySelectorAll(
-        '#themesContainer ntp-theme-icon');
+    return Array.from(customizeThemes.shadowRoot.querySelectorAll(
+        '#themesContainer > :-webkit-any(div, ntp-theme-icon)'));
   }
 
   setup(async () => {