[webui] Transform `ntp-grid` component into `cr-grid` cr_element

The `ntp-grid` element is going to be useful for new components outside
of new_tab_page. This CL moves `ntp-grid` into a common location.

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

chrome/browser/resources/new_tab_page/BUILD.gn

@@ -16,7 +16,6 @@ js_type_check("closure_compile") {
     ":customize_dialog",
     ":doodle_share_dialog",
     ":fakebox",
-    ":grid",
     ":iframe",
     ":logo",
     ":module_descriptor",
@@ -101,9 +100,9 @@ js_library("customize_backgrounds") {
 
 js_library("customize_themes") {
   deps = [
-    ":grid",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_button:cr_button.m",
+    "//ui/webui/resources/cr_elements/cr_grid",
     "//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button.m",
   ]
 }
@@ -129,12 +128,6 @@ js_library("theme_icon") {
   ]
 }
 
-js_library("grid") {
-  deps = [
-    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
-  ]
-}
-
 js_library("voice_search_overlay") {
   deps = [
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
@@ -264,7 +257,6 @@ html_to_js("web_components_local") {
     "customize_themes.js",
     "doodle_share_dialog.js",
     "fakebox.js",
-    "grid.js",
     "logo.js",
     "mini_page.js",
     "most_visited.js",

chrome/browser/resources/new_tab_page/customize_backgrounds.html

@@ -7,8 +7,8 @@
     padding: 4px;
   }
 
-  ntp-grid {
-    --ntp-grid-gap: 8px;
+  cr-grid {
+    --cr-grid-gap: 8px;
   }
 
   .tile {
@@ -166,7 +166,7 @@
   <div id="backgroundsDisabledIcon"></div>
   <div id="backgroundsDisabledTitle">$i18n{customBackgroundDisabled}</div>
 </div>
-<ntp-grid id="collections" columns="3" hidden="[[!showBackgroundSelection_]]">
+<cr-grid id="collections" columns="3" hidden="[[!showBackgroundSelection_]]">
   <div id="uploadFromDevice" class="tile" role="button"
       on-click="onUploadFromDeviceClick_" tabindex="0">
     <div class$="[[getCustomBackgroundClass_(theme, backgroundSelection)]]">
@@ -203,8 +203,8 @@
       </div>
     </template>
   </dom-repeat>
-</ntp-grid>
-<ntp-grid id="images" columns="3" hidden="[[!selectedCollection]]">
+</cr-grid>
+<cr-grid id="images" columns="3" hidden="[[!selectedCollection]]">
   <dom-repeat id="imagesRepeat" items="[[images_]]">
     <template>
       <div
@@ -220,4 +220,4 @@
       </div>
     </template>
   </dom-repeat>
-</ntp-grid>
+</cr-grid>

chrome/browser/resources/new_tab_page/customize_backgrounds.js

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import 'chrome://resources/cr_elements/hidden_style_css.m.js';
-import './grid.js';
+import 'chrome://resources/cr_elements/cr_grid/cr_grid.js';
 import './mini_page.js';
 import './iframe.js';
 

chrome/browser/resources/new_tab_page/customize_themes.html

@@ -44,7 +44,7 @@
   }
 
   #themesContainer {
-    --ntp-grid-gap: 20px;
+    --cr-grid-gap: 20px;
   }
 
   #themesContainer > * {
@@ -114,7 +114,7 @@
 <input id="colorPicker" type="color" on-change="onCustomFrameColorChange_"
     hidden>
 </input>
-<ntp-grid id="themesContainer" columns="6">
+<cr-grid id="themesContainer" columns="6">
   <div id="autogeneratedThemeContainer" tabindex="0"
       on-click="onAutogeneratedThemeClick_">
     <ntp-theme-icon id="autogeneratedTheme" title="$i18n{colorPickerLabel}"
@@ -138,4 +138,4 @@
       </ntp-theme-icon>
     </template>
   </dom-repeat>
-</ntp-grid>
+</cr-grid>

chrome/browser/resources/new_tab_page/customize_themes.js

@@ -4,7 +4,7 @@
 
 import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
 import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
-import './grid.js';
+import 'chrome://resources/cr_elements/cr_grid/cr_grid.js';
 import './theme_icon.js';
 
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

chrome/browser/resources/new_tab_page/modules/dummy/BUILD.gn

@@ -7,9 +7,9 @@ import("//tools/polymer/html_to_js.gni")
 
 js_library("module") {
   deps = [
-    "../..:grid",
     "../..:module_descriptor",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/cr_grid",
   ]
 }
 

chrome/browser/resources/new_tab_page/modules/dummy/module.html

@@ -13,8 +13,8 @@
     width: 170px;
   }
 </style>
-<ntp-grid id="tiles" columns="3">
+<cr-grid id="tiles" columns="3">
   <template id="tileList" is="dom-repeat" items="[[tiles]]">
     <div class="tile-item" title="[[item.label]]">[[item.value]]</div>
   </template>
-</ntp-grid>
+</cr-grid>

chrome/browser/resources/new_tab_page/modules/dummy/module.js

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../grid.js';
+import 'chrome://resources/cr_elements/cr_grid/cr_grid.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';

chrome/browser/resources/new_tab_page/new_tab_page_resources.grd

@@ -39,9 +39,6 @@
       <include name="IDR_NEW_TAB_PAGE_THEME_ICON_JS"
           file="${root_gen_dir}/chrome/browser/resources/new_tab_page/theme_icon.js"
           use_base_dir="false" type="BINDATA" compress="false" />
-      <include name="IDR_NEW_TAB_PAGE_GRID_JS"
-          file="${root_gen_dir}/chrome/browser/resources/new_tab_page/grid.js"
-          use_base_dir="false" type="BINDATA" compress="false" />
       <include name="IDR_NEW_TAB_IFRAME_JS"
           file="${root_gen_dir}/chrome/browser/resources/new_tab_page/iframe.js"
           use_base_dir="false" type="BINDATA" compress="false" />

chrome/test/data/webui/cr_elements/BUILD.gn

@@ -61,6 +61,7 @@ js_type_check("closure_compile") {
     ":cr_expand_button_focus_tests.m",
     ":cr_expand_button_tests.m",
     ":cr_fingerprint_progress_arc_tests.m",
+    ":cr_grid_focus_test",
     ":cr_icon_button_focus_tests.m",
     ":cr_icon_button_tests.m",
     ":cr_input_test.m",
@@ -251,6 +252,17 @@ js_library("cr_input_test.m") {
   extra_deps = [ ":modulize" ]
 }
 
+js_library("cr_grid_focus_test") {
+  deps = [
+    "..:chai_assert",
+    "..:test_util.m",
+    "//third_party/polymer/v3_0/components-chromium/iron-test-helpers:mock-interactions",
+    "//ui/webui/resources/cr_elements/cr_grid",
+    "//ui/webui/resources/js:util.m",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+}
+
 js_library("cr_lazy_render_tests.m") {
   sources = [ "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_lazy_render_tests.m.js" ]
   deps = [

chrome/test/data/webui/cr_elements/cr_elements_v3_focus_test.js

@@ -157,3 +157,16 @@ var IronListFocusV3Test = class extends CrElementsV3FocusTest {
 TEST_F('IronListFocusV3Test', 'All', function() {
   mocha.run();
 });
+
+
+// eslint-disable-next-line no-var
+var CrElementsGridFocusTest = class extends CrElementsV3FocusTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://test?module=cr_elements/cr_grid_focus_test.js';
+  }
+};
+
+TEST_F('CrElementsGridFocusTest', 'All', function() {
+  mocha.run();
+});

chrome/test/data/webui/new_tab_page/grid_focus_test.js → chrome/test/data/webui/cr_elements/cr_grid_focus_test.js

@@ -2,18 +2,21 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'chrome://new-tab-page/new_tab_page.js';
+import {CrGridElement} from 'chrome://resources/cr_elements/cr_grid/cr_grid.js';
+import {getDeepActiveElement} from 'chrome://resources/js/util.m.js';
+import {keyDownOn} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
 
-import {assertFocus, keydown} from 'chrome://test/new_tab_page/test_support.js';
-import {eventToPromise} from 'chrome://test/test_util.m.js';
+import {assertEquals} from '../chai_assert.js';
+import {eventToPromise} from '../test_util.m.js';
 
-suite('NewTabPageGridFocusTest', () => {
+suite('CrElementsGridFocusTest', () => {
   /**
    * @param {number} size
-   * @returns {!GridElement}
+   * @return {!CrGridElement}
    */
   function createGrid(size) {
-    const grid = document.createElement('ntp-grid');
+    const grid =
+        /** @type {!CrGridElement} */ (document.createElement('cr-grid'));
     for (let i = 0; i < size; i++) {
       const div = document.createElement('div');
       div.tabIndex = '0';
@@ -25,8 +28,24 @@ suite('NewTabPageGridFocusTest', () => {
     return grid;
   }
 
+  /**
+   * Asserts that an element is focused.
+   * @param {!Element} element The element to test.
+   */
+  function assertFocus(element) {
+    assertEquals(element, getDeepActiveElement());
+  }
+
+  /**
+   * @param {!Element} element
+   * @param {string} key
+   */
+  function keydown(element, key) {
+    keyDownOn(element, 0, [], key);
+  }
+
   setup(() => {
-    PolymerTest.clearBody();
+    document.body.innerHTML = '';
   });
 
   test('right focuses right item', () => {

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

@@ -54,18 +54,6 @@ TEST_F('NewTabPageCustomizeDialogFocusTest', 'All', function() {
   mocha.run();
 });
 
-// eslint-disable-next-line no-var
-var NewTabPageGridFocusTest = class extends NewTabPageInteractiveTest {
-  /** @override */
-  get browsePreload() {
-    return 'chrome://new-tab-page/test_loader.html?module=new_tab_page/grid_focus_test.js';
-  }
-};
-
-TEST_F('NewTabPageGridFocusTest', 'All', function() {
-  mocha.run();
-});
-
 // eslint-disable-next-line no-var
 var NewTabPageDoodleShareDialogFocusTest =
     class extends NewTabPageInteractiveTest {

ui/webui/resources/cr_elements/BUILD.gn

@@ -16,6 +16,7 @@ group("closure_compile") {
     "cr_drawer:closure_compile",
     "cr_expand_button:closure_compile",
     "cr_fingerprint:closure_compile",
+    "cr_grid:closure_compile",
     "cr_icon_button:closure_compile",
     "cr_input:closure_compile",
     "cr_link_row:closure_compile",
@@ -169,6 +170,7 @@ group("polymer3_elements") {
     "cr_drawer:cr_drawer_module",
     "cr_expand_button:cr_expand_button_module",
     "cr_fingerprint:polymer3_elements",
+    "cr_grid:web_components",
     "cr_icon_button:cr_icon_button_module",
     "cr_input:polymer3_elements",
     "cr_lazy_render:cr_lazy_render_module",

ui/webui/resources/cr_elements/cr_grid/BUILD.gn

+# 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.
+
+import("//third_party/closure_compiler/compile_js.gni")
+import("//tools/polymer/html_to_js.gni")
+
+html_to_js("web_components") {
+  js_files = [ "cr_grid.js" ]
+}
+
+js_type_check("closure_compile") {
+  is_polymer3 = true
+  deps = [ ":cr_grid" ]
+}
+
+js_library("cr_grid") {
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}

chrome/browser/resources/new_tab_page/grid.html → ui/webui/resources/cr_elements/cr_grid/cr_grid.html

 <style>
   :host {
-    --ntp-grid-gap: 0px;
+    --cr-grid-gap: 0px;
   }
 
   #grid {
     display: grid;
-    grid-column-gap: var(--ntp-grid-gap);
-    grid-row-gap: var(--ntp-grid-gap);
-    grid-template-columns: repeat(var(--columns), auto);
+    grid-column-gap: var(--cr-grid-gap);
+    grid-row-gap: var(--cr-grid-gap);
+    grid-template-columns: repeat(var(--cr-grid-columns), auto);
     width: fit-content;
   }
 
@@ -16,6 +16,6 @@
     justify-self: center;
   }
 </style>
-<div id="grid" on-keydown="onKeyDown_" style="--columns: [[columns]];">
+<div id="grid" on-keydown="onKeyDown_">
   <slot id="items"></slot>
 </div>

chrome/browser/resources/new_tab_page/grid.js → ui/webui/resources/cr_elements/cr_grid/cr_grid.js

@@ -6,9 +6,9 @@ import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/poly
 
 // Displays children in a two-dimensional grid and supports focusing children
 // with arrow keys.
-class GridElement extends PolymerElement {
+export class CrGridElement extends PolymerElement {
   static get is() {
-    return 'ntp-grid';
+    return 'cr-grid';
   }
 
   static get template() {
@@ -21,10 +21,16 @@ class GridElement extends PolymerElement {
       columns: {
         type: Number,
         value: 1,
+        observer: 'onColumnsChange_',
       },
     };
   }
 
+  /** @private */
+  onColumnsChange_() {
+    this.updateStyles({'--cr-grid-columns': this.columns});
+  }
+
   /**
    * @param {!Event} e
    * @private
@@ -79,4 +85,4 @@ class GridElement extends PolymerElement {
   }
 }
 
-customElements.define(GridElement.is, GridElement);
+customElements.define(CrGridElement.is, CrGridElement);

ui/webui/resources/cr_elements_resources_v3.grdp

@@ -29,6 +29,10 @@
          file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.m.js"
          use_base_dir="false"
          type="BINDATA" />
+  <include name="IDR_CR_ELEMENTS_CR_EXPAND_BUTTON_M_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.m.js"
+         use_base_dir="false"
+         type="BINDATA" />
   <include name="IDR_CR_ELEMENTS_CR_FINGERPRINT_ICON_M_JS"
          file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_fingerprint/cr_fingerprint_icon.m.js"
          use_base_dir="false"
@@ -37,8 +41,8 @@
          file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.m.js"
          use_base_dir="false"
          type="BINDATA" />
-  <include name="IDR_CR_ELEMENTS_CR_EXPAND_BUTTON_M_JS"
-         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.m.js"
+  <include name="IDR_CR_ELEMENTS_CR_GRID_JS"
+         file="${root_gen_dir}/ui/webui/resources/cr_elements/cr_grid/cr_grid.js"
          use_base_dir="false"
          type="BINDATA" />
   <include name="IDR_CR_ELEMENTS_CR_ICON_BUTTON_M_JS"