Add an option to cr-customize-themes to auto confirm theme changes

Some UIs using cr-customize-themes won't have a confirm button. The
theme should be applied and automatically confirmed in that case.

Bug: 1129186
Change-Id: I34d11264ddcd1977ca5d2179024016f80f10546f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2418374Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Commit-Queue: Tibor Goldschwendt <tiborg@chromium.org>
Auto-Submit: Alex Ilin <alexilin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#808568}

chrome/test/data/webui/cr_components/customize_themes_test.js

@@ -181,33 +181,51 @@ suite('CrComponentsCustomizeThemesTest', () => {
         tiles[3], '--cr-theme-icon-active-tab-color', 'rgba(0, 255, 0, 1)');
   });
 
-  test('clicking default theme calls applying default theme', async () => {
-    // Arrange.
-    const customizeThemesElement = createCustomizeThemesElement();
-    await flushTasks();
-
-    // Act.
-    customizeThemesElement.shadowRoot.querySelector('#defaultTheme').click();
-
-    // Assert.
-    assertEquals(1, testProxy.testHandler.getCallCount('applyDefaultTheme'));
-  });
-
-  test('selecting color calls applying autogenerated theme', async () => {
-    // Arrange.
-    const customizeThemesElement = createCustomizeThemesElement();
-    const applyAutogeneratedThemeCalled =
-        testProxy.testHandler.whenCalled('applyAutogeneratedTheme');
-
-    // Act.
-    customizeThemesElement.shadowRoot.querySelector('#colorPicker').value =
-        '#ff0000';
-    customizeThemesElement.shadowRoot.querySelector('#colorPicker')
-        .dispatchEvent(new Event('change'));
-
-    // Assert.
-    const {value} = await applyAutogeneratedThemeCalled;
-    assertEquals(value, 0xffff0000);
+  [true, false].forEach(autoConfirm => {
+    test(
+        `clicking default theme with autoConfirm="${
+            autoConfirm}" applies default theme`,
+        async () => {
+          // Arrange.
+          const customizeThemesElement = createCustomizeThemesElement();
+          customizeThemesElement.autoConfirmThemeChanges = autoConfirm;
+          await flushTasks();
+
+          // Act.
+          customizeThemesElement.shadowRoot.querySelector('#defaultTheme')
+              .click();
+
+          // Assert.
+          assertEquals(
+              1, testProxy.testHandler.getCallCount('applyDefaultTheme'));
+          assertEquals(
+              autoConfirm ? 1 : 0,
+              testProxy.testHandler.getCallCount('confirmThemeChanges'));
+        });
+
+    test(
+        `selecting color with autoConfirm="${
+            autoConfirm}" applies autogenerated theme`,
+        async () => {
+          // Arrange.
+          const customizeThemesElement = createCustomizeThemesElement();
+          customizeThemesElement.autoConfirmThemeChanges = autoConfirm;
+          const applyAutogeneratedThemeCalled =
+              testProxy.testHandler.whenCalled('applyAutogeneratedTheme');
+
+          // Act.
+          customizeThemesElement.shadowRoot.querySelector('#colorPicker')
+              .value = '#ff0000';
+          customizeThemesElement.shadowRoot.querySelector('#colorPicker')
+              .dispatchEvent(new Event('change'));
+
+          // Assert.
+          const {value} = await applyAutogeneratedThemeCalled;
+          assertEquals(value, 0xffff0000);
+          assertEquals(
+              autoConfirm ? 1 : 0,
+              testProxy.testHandler.getCallCount('confirmThemeChanges'));
+        });
   });
 
   test('setting autogenerated theme selects and updates icon', async () => {

ui/webui/resources/cr_components/customize_themes/customize_themes.js

@@ -37,13 +37,27 @@ export class CustomizeThemesElement extends mixinBehaviors
 
   static get properties() {
     return {
-      /** @type {!customizeThemes.mojom.Theme} */
+      /**
+       * An object describing the currently selected theme.
+       * @type {!customizeThemes.mojom.Theme}
+       */
       selectedTheme: {
         type: Object,
         observer: 'onThemeChange_',
         notify: true,
       },
 
+      /**
+       * If false, confirmThemeChanges() should be called after applying a theme
+       * to permanently apply the change. Otherwise, theme changes are confirmed
+       * automatically.
+       * @type {Boolean}
+       */
+      autoConfirmThemeChanges: {
+        type: Boolean,
+        value: false,
+      },
+
       /** @private {!Array<!customizeThemes.mojom.ChromeTheme>} */
       chromeThemes_: Array,
     };
@@ -97,6 +111,9 @@ export class CustomizeThemesElement extends mixinBehaviors
    */
   onCustomFrameColorChange_(e) {
     this.handler_.applyAutogeneratedTheme(hexColorToSkColor(e.target.value));
+    if (this.autoConfirmThemeChanges) {
+      this.handler_.confirmThemeChanges();
+    }
   }
 
   /** @private */
@@ -107,6 +124,9 @@ export class CustomizeThemesElement extends mixinBehaviors
   /** @private */
   onDefaultThemeClick_() {
     this.handler_.applyDefaultTheme();
+    if (this.autoConfirmThemeChanges) {
+      this.handler_.confirmThemeChanges();
+    }
   }
 
   /**
@@ -115,6 +135,9 @@ export class CustomizeThemesElement extends mixinBehaviors
    */
   onChromeThemeClick_(e) {
     this.handler_.applyChromeTheme(this.$.themes.itemForElement(e.target).id);
+    if (this.autoConfirmThemeChanges) {
+      this.handler_.confirmThemeChanges();
+    }
   }
 
   /** @private */