[webui] Extract color utils functions from new_tab_page

hexColorToSkColor() and skColorToRgba() functions are going to be used
for new components outside of new_tab_page. This CL moves these
functions into a common location.

Bug: 1115301
Change-Id: Id93ca128802240e81b1a359aca8aae3492294c13
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2362793
Commit-Queue: Alex Ilin <alexilin@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#800057}

chrome/browser/resources/new_tab_page/app.js

@@ -16,6 +16,7 @@ import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
 import 'chrome://resources/cr_elements/shared_style_css.m.js';
 
 import {assert} from 'chrome://resources/js/assert.m.js';
+import {hexColorToSkColor, skColorToRgba} from 'chrome://resources/js/color_utils.js';
 import {FocusOutlineManager} from 'chrome://resources/js/cr/ui/focus_outline_manager.m.js';
 import {EventTracker} from 'chrome://resources/js/event_tracker.m.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
@@ -28,7 +29,7 @@ import {ModuleDescriptor} from './modules/module_descriptor.js';
 import {ModuleRegistry} from './modules/module_registry.js';
 import {oneGoogleBarApi} from './one_google_bar_api.js';
 import {PromoBrowserCommandProxy} from './promo_browser_command_proxy.js';
-import {$$, hexColorToSkColor, skColorToRgba} from './utils.js';
+import {$$} from './utils.js';
 
 /**
  * @typedef {{

chrome/browser/resources/new_tab_page/background_manager.js

@@ -2,12 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {skColorToRgba} from 'chrome://resources/js/color_utils.js';
 import {addSingletonGetter} from 'chrome://resources/js/cr.m.js';
 import {EventTracker} from 'chrome://resources/js/event_tracker.m.js';
 import {PromiseResolver} from 'chrome://resources/js/promise_resolver.m.js';
 
 import {BrowserProxy} from './browser_proxy.js';
-import {skColorToRgba} from './utils.js';
 
 /**
  * @fileoverview The background manager brokers access to background related

chrome/browser/resources/new_tab_page/customize_themes.js

@@ -7,10 +7,10 @@ import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
 import 'chrome://resources/cr_elements/cr_grid/cr_grid.js';
 import './theme_icon.js';
 
+import {hexColorToSkColor, skColorToRgba} from 'chrome://resources/js/color_utils.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {BrowserProxy} from './browser_proxy.js';
-import {hexColorToSkColor, skColorToRgba} from './utils.js';
 
 /** Element that lets the user configure the theme. */
 class CustomizeThemesElement extends PolymerElement {

chrome/browser/resources/new_tab_page/logo.js

@@ -8,12 +8,13 @@ import './iframe.js';
 import './doodle_share_dialog.js';
 
 import {assert} from 'chrome://resources/js/assert.m.js';
+import {skColorToRgba} from 'chrome://resources/js/color_utils.js';
 import {EventTracker} from 'chrome://resources/js/event_tracker.m.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {BrowserProxy} from './browser_proxy.js';
-import {$$, skColorToRgba} from './utils.js';
+import {$$} from './utils.js';
 
 /** @type {number} */
 const SHARE_BUTTON_SIZE_PX = 26;

chrome/browser/resources/new_tab_page/new_tab_page.js

@@ -20,4 +20,4 @@ export {kaleidoscopeDescriptor} from './modules/kaleidoscope/module.js';
 export {ModuleDescriptor} from './modules/module_descriptor.js';
 export {ModuleRegistry} from './modules/module_registry.js';
 export {PromoBrowserCommandProxy} from './promo_browser_command_proxy.js';
-export {$$, createScrollBorders, decodeString16, hexColorToSkColor, mojoString16, skColorToRgba} from './utils.js';
+export {$$, createScrollBorders, decodeString16, mojoString16} from './utils.js';

chrome/browser/resources/new_tab_page/realbox.js

@@ -7,11 +7,12 @@ import './realbox_dropdown.js';
 import './realbox_icon.js';
 
 import {assert} from 'chrome://resources/js/assert.m.js';
+import {skColorToRgba} from 'chrome://resources/js/color_utils.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {BrowserProxy} from './browser_proxy.js';
-import {decodeString16, mojoString16, mojoTimeDelta, skColorToRgba} from './utils.js';
+import {decodeString16, mojoString16, mojoTimeDelta} from './utils.js';
 
 /** @typedef {{text: string, inline: string,}} */
 let Input;

chrome/browser/resources/new_tab_page/realbox_dropdown.js

@@ -7,11 +7,12 @@ import './realbox_button.js';
 import './realbox_match.js';
 
 import {assert} from 'chrome://resources/js/assert.m.js';
+import {skColorToRgba} from 'chrome://resources/js/color_utils.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {BrowserProxy} from './browser_proxy.js';
-import {decodeString16, skColorToRgba} from './utils.js';
+import {decodeString16} from './utils.js';
 
 // A dropdown element that contains autocomplete matches. Provides an API for
 // the embedder (i.e., <ntp-realbox>) to change the selection.

chrome/browser/resources/new_tab_page/utils.js

@@ -2,35 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/**
- * Converts an SkColor object to a string in the form
- * "rgba(<red>, <green>, <blue>, <alpha>)".
- * @param {skia.mojom.SkColor} skColor The input color.
- * @return {string} The rgba string.
- */
-export function skColorToRgba(skColor) {
-  const a = (skColor.value >> 24) & 0xff;
-  const r = (skColor.value >> 16) & 0xff;
-  const g = (skColor.value >> 8) & 0xff;
-  const b = skColor.value & 0xff;
-  return `rgba(${r}, ${g}, ${b}, ${(a / 255).toFixed(2)})`;
-}
-
-/**
- * Converts a string of the form "#rrggbb" to an SkColor object.
- * @param {string} hexColor The color string.
- * @return {!skia.mojom.SkColor} The SkColor object,
- */
-export function hexColorToSkColor(hexColor) {
-  if (!/^#[0-9a-f]{6}$/.test(hexColor)) {
-    return {value: 0};
-  }
-  const r = parseInt(hexColor.substring(1, 3), 16);
-  const g = parseInt(hexColor.substring(3, 5), 16);
-  const b = parseInt(hexColor.substring(5, 7), 16);
-  return {value: 0xff000000 + (r << 16) + (g << 8) + b};
-}
-
 /**
  * Given a |container| that has scrollable content, <div>'s before and after the
  * |container| are created with an attribute "scroll-border". These <div>'s are

chrome/browser/resources/tools/rollup_plugin.js

@@ -19,6 +19,7 @@ const nonGeneratedFiles = [
   'certificate_manager_types.js',
   'certificate_provisioning_browser_proxy.js',
   'certificates_browser_proxy.js',
+  'color_utils.js',
   'cr.m.js',
   'cr_splitter.js',
   'plural_string_proxy.js',

chrome/test/data/webui/js/color_utils_test.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// So that mojo is defined.
+import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
+
+import {hexColorToSkColor, skColorToRgba} from 'chrome://resources/js/color_utils.js';
+
+import {assertDeepEquals, assertEquals} from '../chai_assert.js';
+
+suite('ColorUtilsModuleTest', () => {
+  test('Can convert simple SkColors to rgba strings', () => {
+    assertEquals(skColorToRgba({value: 0xffff0000}), 'rgba(255, 0, 0, 1.00)');
+    assertEquals(skColorToRgba({value: 0xff00ff00}), 'rgba(0, 255, 0, 1.00)');
+    assertEquals(skColorToRgba({value: 0xff0000ff}), 'rgba(0, 0, 255, 1.00)');
+    assertEquals(
+        skColorToRgba({value: 0xffffffff}), 'rgba(255, 255, 255, 1.00)');
+    assertEquals(skColorToRgba({value: 0xff000000}), 'rgba(0, 0, 0, 1.00)');
+  });
+
+  test('Can convert complex SkColors to rgba strings', () => {
+    assertEquals(
+        skColorToRgba({value: 0xC0a11f8f}), 'rgba(161, 31, 143, 0.75)');
+    assertEquals(skColorToRgba({value: 0x802b6335}), 'rgba(43, 99, 53, 0.50)');
+    assertEquals(
+        skColorToRgba({value: 0x40e3d2c1}), 'rgba(227, 210, 193, 0.25)');
+  });
+
+  test('Can convert simple hex strings to SkColors', () => {
+    assertDeepEquals(hexColorToSkColor('#ff0000'), {value: 0xffff0000});
+    assertDeepEquals(hexColorToSkColor('#00ff00'), {value: 0xff00ff00});
+    assertDeepEquals(hexColorToSkColor('#0000ff'), {value: 0xff0000ff});
+    assertDeepEquals(hexColorToSkColor('#ffffff'), {value: 0xffffffff});
+    assertDeepEquals(hexColorToSkColor('#000000'), {value: 0xff000000});
+  });
+
+  test('Can convert complex hex strings to SkColors', () => {
+    assertDeepEquals(hexColorToSkColor('#a11f8f'), {value: 0xffa11f8f});
+    assertDeepEquals(hexColorToSkColor('#2b6335'), {value: 0xff2b6335});
+    assertDeepEquals(hexColorToSkColor('#e3d2c1'), {value: 0xffe3d2c1});
+  });
+
+  test('Cannot convert malformed hex strings to SkColors', () => {
+    assertDeepEquals(hexColorToSkColor('#fffffr'), {value: 0});
+    assertDeepEquals(hexColorToSkColor('#ffffff0'), {value: 0});
+    assertDeepEquals(hexColorToSkColor('ffffff'), {value: 0});
+  });
+});

chrome/test/data/webui/js/webui_resource_module_async_browsertest.js

@@ -119,3 +119,14 @@ var I18nBehaviorModuleTest = class extends WebUIResourceModuleAsyncTest {
 TEST_F('I18nBehaviorModuleTest', 'All', function() {
   mocha.run();
 });
+
+var ColorUtilsModuleTest = class extends WebUIResourceModuleAsyncTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://test?module=js/color_utils_test.js';
+  }
+};
+
+TEST_F('ColorUtilsModuleTest', 'All', function() {
+  mocha.run();
+});

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

@@ -2,7 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {$$, BrowserProxy, hexColorToSkColor, skColorToRgba} from 'chrome://new-tab-page/new_tab_page.js';
+import {$$, BrowserProxy} from 'chrome://new-tab-page/new_tab_page.js';
+import {hexColorToSkColor, skColorToRgba} from 'chrome://resources/js/color_utils.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {PromiseResolver} from 'chrome://resources/js/promise_resolver.m.js';
 import {assertNotStyle, assertStyle, createTestProxy, keydown} from 'chrome://test/new_tab_page/test_support.js';

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

@@ -5,48 +5,9 @@
 // So that mojo is defined.
 import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
 
-import {createScrollBorders, decodeString16, hexColorToSkColor, mojoString16, skColorToRgba} from 'chrome://new-tab-page/new_tab_page.js';
+import {createScrollBorders, decodeString16, mojoString16} from 'chrome://new-tab-page/new_tab_page.js';
 import {waitAfterNextRender} from 'chrome://test/test_util.m.js';
 
-suite('NewTabPageUtilsTest', () => {
-  test('Can convert simple SkColors to rgba strings', () => {
-    assertEquals(skColorToRgba({value: 0xffff0000}), 'rgba(255, 0, 0, 1.00)');
-    assertEquals(skColorToRgba({value: 0xff00ff00}), 'rgba(0, 255, 0, 1.00)');
-    assertEquals(skColorToRgba({value: 0xff0000ff}), 'rgba(0, 0, 255, 1.00)');
-    assertEquals(
-        skColorToRgba({value: 0xffffffff}), 'rgba(255, 255, 255, 1.00)');
-    assertEquals(skColorToRgba({value: 0xff000000}), 'rgba(0, 0, 0, 1.00)');
-  });
-
-  test('Can convert complex SkColors to rgba strings', () => {
-    assertEquals(
-        skColorToRgba({value: 0xC0a11f8f}), 'rgba(161, 31, 143, 0.75)');
-    assertEquals(skColorToRgba({value: 0x802b6335}), 'rgba(43, 99, 53, 0.50)');
-    assertEquals(
-        skColorToRgba({value: 0x40e3d2c1}), 'rgba(227, 210, 193, 0.25)');
-  });
-
-  test('Can convert simple hex strings to SkColors', () => {
-    assertDeepEquals(hexColorToSkColor('#ff0000'), {value: 0xffff0000});
-    assertDeepEquals(hexColorToSkColor('#00ff00'), {value: 0xff00ff00});
-    assertDeepEquals(hexColorToSkColor('#0000ff'), {value: 0xff0000ff});
-    assertDeepEquals(hexColorToSkColor('#ffffff'), {value: 0xffffffff});
-    assertDeepEquals(hexColorToSkColor('#000000'), {value: 0xff000000});
-  });
-
-  test('Can convert complex hex strings to SkColors', () => {
-    assertDeepEquals(hexColorToSkColor('#a11f8f'), {value: 0xffa11f8f});
-    assertDeepEquals(hexColorToSkColor('#2b6335'), {value: 0xff2b6335});
-    assertDeepEquals(hexColorToSkColor('#e3d2c1'), {value: 0xffe3d2c1});
-  });
-
-  test('Cannot convert malformed hex strings to SkColors', () => {
-    assertDeepEquals(hexColorToSkColor('#fffffr'), {value: 0});
-    assertDeepEquals(hexColorToSkColor('#ffffff0'), {value: 0});
-    assertDeepEquals(hexColorToSkColor('ffffff'), {value: 0});
-  });
-});
-
 suite('scroll borders', () => {
   /** @type {!HTMLElement} */
   let container;

ui/webui/resources/js/color_utils.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview Helper functions for color manipulations.
+ */
+
+import 'chrome://resources/mojo/skia/public/mojom/skcolor.mojom-lite.js';
+
+/**
+ * Converts an SkColor object to a string in the form
+ * "rgba(<red>, <green>, <blue>, <alpha>)".
+ * @param {skia.mojom.SkColor} skColor The input color.
+ * @return {string} The rgba string.
+ */
+export function skColorToRgba(skColor) {
+  const a = (skColor.value >> 24) & 0xff;
+  const r = (skColor.value >> 16) & 0xff;
+  const g = (skColor.value >> 8) & 0xff;
+  const b = skColor.value & 0xff;
+  return `rgba(${r}, ${g}, ${b}, ${(a / 255).toFixed(2)})`;
+}
+
+/**
+ * Converts a string of the form "#rrggbb" to an SkColor object.
+ * @param {string} hexColor The color string.
+ * @return {!skia.mojom.SkColor} The SkColor object,
+ */
+export function hexColorToSkColor(hexColor) {
+  if (!/^#[0-9a-f]{6}$/.test(hexColor)) {
+    return {value: 0};
+  }
+  const r = parseInt(hexColor.substring(1, 3), 16);
+  const g = parseInt(hexColor.substring(3, 5), 16);
+  const b = parseInt(hexColor.substring(5, 7), 16);
+  return {value: 0xff000000 + (r << 16) + (g << 8) + b};
+}

ui/webui/resources/webui_resources.grd

@@ -86,6 +86,8 @@ without changes to the corresponding grd file. -->
       <include name="IDR_WEBUI_JS_ASSERT_M_JS"
                file="${root_gen_dir}/ui/webui/resources/js/assert.m.js"
                use_base_dir="false" type="BINDATA" />
+      <include name="IDR_WEBUI_JS_COLOR_UTILS_JS"
+               file="js/color_utils.js" type="BINDATA" />
       <include name="IDR_WEBUI_JS_CR_EVENT_TARGET_M_JS"
                file="${root_gen_dir}/ui/webui/resources/js/cr/event_target.m.js"
                use_base_dir="false" type="BINDATA" />