WebUI: Add JS module for another 7 files in cr.ui.

This is the last batch of dependencies from Files app.

Add the entries in the GRD file for files in this CL and for CL:2440331.

Bug: 1133198, 1134497, 1023038
Change-Id: I6f8026679f411629d3334f2f85d054245d7afb86
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2470036Reviewed-by: dpapad <dpapad@chromium.org>
Commit-Queue: dpapad <dpapad@chromium.org>
Auto-Submit: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#816948}

ui/webui/resources/js/cr/ui/BUILD.gn

@@ -249,6 +249,8 @@ js_library("tree") {
 js_modulizer("modulize") {
   input_files = [
     "array_data_model.js",
+    "command.js",
+    "context_menu_handler.js",
     "dialogs.js",
     "drag_wrapper.js",
     "focus_grid.js",
@@ -256,12 +258,16 @@ js_modulizer("modulize") {
     "focus_row.js",
     "focus_row_behavior.js",
     "focus_without_ink.js",
+    "grid.js",
     "keyboard_shortcut_list.js",
     "list.js",
     "list_item.js",
     "list_selection_controller.js",
     "list_selection_model.js",
     "list_single_selection_model.js",
+    "menu.js",
+    "menu_button.js",
+    "menu_item.js",
     "position_util.js",
     "splitter.js",
     "store.js",
@@ -273,6 +279,8 @@ js_modulizer("modulize") {
     "cr.PropertyKind|PropertyKind",
     "cr.dispatchPropertyChange|dispatchPropertyChange",
     "cr.EventTarget|EventTarget",
+    "cr.ui.Command|Command",
+    "cr.ui.decorate|decorate",
     "cr.ui.dialogs.BaseDialog|BaseDialog",
     "cr.ui.dialogs.AlertDialog|AlertDialog",
     "cr.ui.dialogs.ConfirmDialog|ConfirmDialog",
@@ -285,12 +293,18 @@ js_modulizer("modulize") {
     "cr.ui.DragWrapperDelegate|DragWrapperDelegate",
     "cr.ui.FocusRowDelegate|FocusRowDelegate",
     "cr.ui.FocusRow|FocusRow",
+    "cr.ui.Grid|Grid",
+    "cr.ui.HideType|HideType",
     "cr.ui.limitInputWidth|limitInputWidth",
     "cr.ui.List|List",
-    "cr.ui.Size|Size",
     "cr.ui.ListItem|ListItem",
     "cr.ui.ListSelectionModel|ListSelectionModel",
     "cr.ui.ListSelectionController|ListSelectionController",
+    "cr.ui.Menu|Menu",
+    "cr.ui.positionPopupAroundElement|positionPopupAroundElement",
+    "cr.ui.positionPopupAtPoint|positionPopupAtPoint",
+    "cr.ui.swallowDoubleClick|swallowDoubleClick",
+    "cr.ui.Size|Size",
     "cr.ui.StoreObserver|StoreObserver",
     "cr.ui.Tree|Tree",
     "cr.ui.TreeItem|TreeItem",
@@ -302,6 +316,8 @@ js_type_check("ui_resources_modules") {
   is_polymer3 = true
   deps = [
     ":array_data_model.m",
+    ":command.m",
+    ":context_menu_handler.m",
     ":dialogs.m",
     ":drag_wrapper.m",
     ":focus_grid.m",
@@ -309,12 +325,16 @@ js_type_check("ui_resources_modules") {
     ":focus_row.m",
     ":focus_row_behavior.m",
     ":focus_without_ink.m",
+    ":grid.m",
     ":keyboard_shortcut_list.m",
     ":list.m",
     ":list_item.m",
     ":list_selection_controller.m",
     ":list_selection_model.m",
     ":list_single_selection_model.m",
+    ":menu.m",
+    ":menu_button.m",
+    ":menu_item.m",
     ":position_util.m",
     ":splitter.m",
     ":store.m",
@@ -334,6 +354,36 @@ js_library("array_data_model.m") {
   extra_deps = [ ":modulize" ]
 }
 
+js_library("command.m") {
+  sources = [ "$root_gen_dir/ui/webui/resources/js/cr/ui/command.m.js" ]
+  deps = [
+    ":keyboard_shortcut_list.m",
+    "../:ui.m",
+    "../..:assert.m",
+    "../..:cr.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
+js_library("context_menu_handler.m") {
+  sources =
+      [ "$root_gen_dir/ui/webui/resources/js/cr/ui/context_menu_handler.m.js" ]
+  deps = [
+    ":menu.m",
+    ":menu_button.m",
+    ":menu_item.m",
+    ":position_util.m",
+    "..:event_target.m",
+    "../:ui.m",
+    "../..:assert.m",
+    "../..:cr.m",
+    "../..:event_tracker.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("dialogs.m") {
   sources = [ "$root_gen_dir/ui/webui/resources/js/cr/ui/dialogs.m.js" ]
   extra_deps = [ ":modulize" ]
@@ -391,6 +441,18 @@ js_library("focus_without_ink.m") {
   extra_deps = [ ":modulize" ]
 }
 
+js_library("grid.m") {
+  sources = [ "$root_gen_dir/ui/webui/resources/js/cr/ui/grid.m.js" ]
+  deps = [
+    ":list.m",
+    ":list_item.m",
+    ":list_selection_controller.m",
+    ":list_selection_model.m",
+    "../:ui.m",
+  ]
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("keyboard_shortcut_list.m") {
   sources = [
     "$root_gen_dir/ui/webui/resources/js/cr/ui/keyboard_shortcut_list.m.js",
@@ -447,6 +509,43 @@ js_library("list_single_selection_model.m") {
   extra_deps = [ ":modulize" ]
 }
 
+js_library("menu.m") {
+  sources = [ "$root_gen_dir/ui/webui/resources/js/cr/ui/menu.m.js" ]
+  deps = [
+    ":menu_item.m",
+    "../:ui.m",
+    "../..:assert.m",
+    "../..:cr.m",
+  ]
+  extra_deps = [ ":modulize" ]
+}
+
+js_library("menu_button.m") {
+  sources = [ "$root_gen_dir/ui/webui/resources/js/cr/ui/menu_button.m.js" ]
+  deps = [
+    ":menu.m",
+    ":menu_item.m",
+    ":position_util.m",
+    "../:ui.m",
+    "../..:assert.m",
+    "../..:cr.m",
+    "../..:event_tracker.m",
+  ]
+  extra_deps = [ ":modulize" ]
+}
+
+js_library("menu_item.m") {
+  sources = [ "$root_gen_dir/ui/webui/resources/js/cr/ui/menu_item.m.js" ]
+  deps = [
+    ":command.m",
+    "../:ui.m",
+    "../..:assert.m",
+    "../..:cr.m",
+    "../..:load_time_data.m",
+  ]
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("position_util.m") {
   sources = [ "$root_gen_dir/ui/webui/resources/js/cr/ui/position_util.m.js" ]
   extra_deps = [ ":modulize" ]

ui/webui/resources/js/cr/ui/command.js

@@ -15,13 +15,21 @@
  * command if there might be other command listeners higher up in the DOM tree.
  */
 
+// clang-format off
+// #import {assert} from '../../assert.m.js';
+// #import {define as crUiDefine} from '../ui.m.js';
+// #import {KeyboardShortcutList} from './keyboard_shortcut_list.m.js';
+// #import {dispatchPropertyChange, getPropertyDescriptor, PropertyKind} from '../../cr.m.js';
+// #import {MenuItem} from './menu_item.m.js';
+// clang-format on
+
 cr.define('cr.ui', function() {
   /**
    * Creates a new command element.
    * @constructor
    * @extends {HTMLElement}
    */
-  const Command = cr.ui.define('command');
+  /* #export */ const Command = cr.ui.define('command');
 
   Command.prototype = {
     __proto__: HTMLElement.prototype,
@@ -113,23 +121,37 @@ cr.define('cr.ui', function() {
 
   /**
    * The label of the command.
+   * @type {string}
    */
-  cr.defineProperty(Command, 'label', cr.PropertyKind.ATTR);
+  Command.prototype.label;
+  Object.defineProperty(
+      Command.prototype, 'label',
+      cr.getPropertyDescriptor('label', cr.PropertyKind.ATTR));
 
   /**
    * Whether the command is disabled or not.
+   * @type {boolean}
    */
-  cr.defineProperty(Command, 'disabled', cr.PropertyKind.BOOL_ATTR);
+  Command.prototype.disabled;
+  Object.defineProperty(
+      Command.prototype, 'disabled',
+      cr.getPropertyDescriptor('disabled', cr.PropertyKind.BOOL_ATTR));
 
   /**
    * Whether the command is hidden or not.
    */
-  cr.defineProperty(Command, 'hidden', cr.PropertyKind.BOOL_ATTR);
+  Object.defineProperty(
+      Command.prototype, 'hidden',
+      cr.getPropertyDescriptor('hidden', cr.PropertyKind.BOOL_ATTR));
 
   /**
    * Whether the command is checked or not.
+   * @type {boolean}
    */
-  cr.defineProperty(Command, 'checked', cr.PropertyKind.BOOL_ATTR);
+  Command.prototype.checked;
+  Object.defineProperty(
+      Command.prototype, 'checked',
+      cr.getPropertyDescriptor('checked', cr.PropertyKind.BOOL_ATTR));
 
   /**
    * The flag that prevents the shortcut text from being displayed on menu.
@@ -137,8 +159,12 @@ cr.define('cr.ui', function() {
    * If false, the keyboard shortcut text (eg. "Ctrl+X" for the cut command)
    * is displayed in menu when the command is associated with a menu item.
    * Otherwise, no text is displayed.
+   * @type {boolean}
    */
-  cr.defineProperty(Command, 'hideShortcutText', cr.PropertyKind.BOOL_ATTR);
+  Command.prototype.hideShortcutText;
+  Object.defineProperty(
+      Command.prototype, 'hideShortcutText',
+      cr.getPropertyDescriptor('hideShortcutText', cr.PropertyKind.BOOL_ATTR));
 
   /**
    * Dispatches a canExecute event on the target.
@@ -240,7 +266,7 @@ cr.define('cr.ui', function() {
    * @constructor
    * @class
    */
-  function CanExecuteEvent(command) {
+  /* #export */ function CanExecuteEvent(command) {
     const e = new Event('canExecute', {bubbles: true, cancelable: true});
     e.__proto__ = CanExecuteEvent.prototype;
     e.command = command;
@@ -274,6 +300,7 @@ cr.define('cr.ui', function() {
   };
 
   // Export
+  // #cr_define_end
   return {
     Command: Command,
     CanExecuteEvent: CanExecuteEvent,

ui/webui/resources/js/cr/ui/context_menu_handler.js

@@ -4,8 +4,20 @@
 
 // require: event_target.js
 
+// clang-format off
+// #import {assertInstanceof} from '../../assert.m.js';
+// #import {NativeEventTarget as EventTarget} from '../event_target.m.js'
+// #import {EventTracker} from '../../event_tracker.m.js'
+// #import {isWindows, isLinux, isMac, isLacros, dispatchPropertyChange} from '../../cr.m.js';
+// #import {decorate} from '../ui.m.js';
+// #import {Menu} from './menu.m.js';
+// #import {MenuItem} from './menu_item.m.js';
+// #import {HideType} from './menu_button.m.js';
+// #import {positionPopupAtPoint} from './position_util.m.js';
+// clang-format on
+
 cr.define('cr.ui', function() {
-  /** @const */ const Menu = cr.ui.Menu;
+  /* #ignore */ /** @const */ const Menu = cr.ui.Menu;
 
   /**
    * Handles context menus.
@@ -304,9 +316,10 @@ cr.define('cr.ui', function() {
    * The singleton context menu handler.
    * @type {!ContextMenuHandler}
    */
-  const contextMenuHandler = new ContextMenuHandler;
+  /* #export */ const contextMenuHandler = new ContextMenuHandler;
 
   // Export
+  // #cr_define_end
   return {
     contextMenuHandler: contextMenuHandler,
   };

ui/webui/resources/js/cr/ui/grid.js

@@ -2,9 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// require: list_selection_model.js
-// require: list_selection_controller.js
-// require: list.js
+// clang-format off
+// #import {define as crUiDefine} from '../ui.m.js';
+// #import {ListSelectionModel} from './list_selection_model.m.js';
+// #import {ListSelectionController} from './list_selection_controller.m.js';
+// #import {List} from './list.m.js';
+// #import {ListItem} from './list_item.m.js';
+// clang-format on
 
 /**
  * @fileoverview This implements a grid control. Grid contains a bunch of
@@ -13,9 +17,10 @@
  */
 
 cr.define('cr.ui', function() {
-  /** @const */ const ListSelectionController = cr.ui.ListSelectionController;
-  /** @const */ const List = cr.ui.List;
-  /** @const */ const ListItem = cr.ui.ListItem;
+  /* #ignore */ /** @const */ const ListSelectionController =
+      /* #ignore */ cr.ui.ListSelectionController;
+  /* #ignore */ /** @const */ const List = cr.ui.List;
+  /* #ignore */ /** @const */ const ListItem = cr.ui.ListItem;
 
   /**
    * Creates a new grid item element.
@@ -23,7 +28,7 @@ cr.define('cr.ui', function() {
    * @constructor
    * @extends {cr.ui.ListItem}
    */
-  function GridItem(dataItem) {
+  /* #export */ function GridItem(dataItem) {
     const el = document.createElement('li');
     el.dataItem = dataItem;
     el.__proto__ = GridItem.prototype;
@@ -48,7 +53,7 @@ cr.define('cr.ui', function() {
    * @constructor
    * @extends {cr.ui.List}
    */
-  const Grid = cr.ui.define('grid');
+  /* #export */ const Grid = cr.ui.define('grid');
 
   Grid.prototype = {
     __proto__: List.prototype,
@@ -357,7 +362,7 @@ cr.define('cr.ui', function() {
    * @constructor
    * @extends {cr.ui.ListSelectionController}
    */
-  function GridSelectionController(selectionModel, grid) {
+  /* #export */ function GridSelectionController(selectionModel, grid) {
     this.selectionModel_ = selectionModel;
     this.grid_ = grid;
   }
@@ -438,6 +443,7 @@ cr.define('cr.ui', function() {
     }
   };
 
+  // #cr_define_end
   return {
     Grid: Grid,
     GridItem: GridItem,

ui/webui/resources/js/cr/ui/menu.js

@@ -2,8 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// #import {assert, assertInstanceof} from '../../assert.m.js';
+// #import {define as crUiDefine, decorate} from '../ui.m.js';
+// #import {getPropertyDescriptor, PropertyKind} from '../../cr.m.js';
+// #import {MenuItem} from './menu_item.m.js';
+
 cr.define('cr.ui', function() {
-  /** @const */ const MenuItem = cr.ui.MenuItem;
+  /* #ignore */ /** @const */ const MenuItem = cr.ui.MenuItem;
 
   /**
    * Creates a new menu element. Menu dispatches all commands on the element it
@@ -13,7 +18,7 @@ cr.define('cr.ui', function() {
    * @constructor
    * @extends {HTMLElement}
    */
-  const Menu = cr.ui.define('cr-menu');
+  /* #export */ const Menu = cr.ui.define('cr-menu');
 
   Menu.prototype = {
     __proto__: HTMLElement.prototype,
@@ -361,6 +366,7 @@ cr.define('cr.ui', function() {
     }
   };
 
+  /** @suppress {globalThis} This standalone function is used like method. */
   function selectedIndexChanged(selectedIndex, oldSelectedIndex) {
     const oldSelectedItem = this.menuItems[oldSelectedIndex];
     if (oldSelectedItem) {
@@ -375,16 +381,24 @@ cr.define('cr.ui', function() {
 
   /**
    * The selected menu item.
-   * type {number}
+   * @type {number}
    */
-  cr.defineProperty(
-      Menu, 'selectedIndex', cr.PropertyKind.JS, selectedIndexChanged);
+  Menu.prototype.selectedIndex;
+  Object.defineProperty(
+      Menu.prototype, 'selectedIndex',
+      cr.getPropertyDescriptor(
+          'selectedIndex', cr.PropertyKind.JS, selectedIndexChanged));
 
   /**
    * Selector for children which are menu items.
+   * @type {string}
    */
-  cr.defineProperty(Menu, 'menuItemSelector', cr.PropertyKind.ATTR);
+  Menu.prototype.menuItemSelector;
+  Object.defineProperty(
+      Menu.prototype, 'menuItemSelector',
+      cr.getPropertyDescriptor('menuItemSelector', cr.PropertyKind.ATTR));
 
   // Export
+  // #cr_define_end
   return {Menu: Menu};
 });

ui/webui/resources/js/cr/ui/menu_button.js

@@ -4,23 +4,30 @@
 
 // <include src="../../assert.js">
 
+// #import {assert} from '../../assert.m.js';
+// #import {isWindows} from '../../cr.m.js';
+// #import {EventTracker} from '../../event_tracker.m.js'
+// #import {define as crUiDefine, decorate} from '../ui.m.js';
+// #import {positionPopupAroundElement, AnchorType} from './position_util.m.js';
+// #import {Menu} from './menu.m.js';
+// #import {MenuItem} from './menu_item.m.js';
 
 cr.define('cr.ui', function() {
-  /** @const */
-  const Menu = cr.ui.Menu;
+  /* #ignore */ const Menu = cr.ui.Menu;
 
   /**
    * Enum for type of hide. Delayed is used when called by clicking on a
    * checkable menu item.
    * @enum {number}
    */
-  const HideType = {
+  /* #export */ const HideType = {
     INSTANT: 0,
     DELAYED: 1,
   };
 
   /** @const */
-  const positionPopupAroundElement = cr.ui.positionPopupAroundElement;
+  /* #ignore */ const positionPopupAroundElement =
+      /* #ignore */ cr.ui.positionPopupAroundElement;
 
   /**
    * Creates a new menu button element.
@@ -29,7 +36,7 @@ cr.define('cr.ui', function() {
    * @extends {HTMLButtonElement}
    * @implements {EventListener}
    */
-  const MenuButton = cr.ui.define('button');
+  /* #export */ const MenuButton = cr.ui.define('button');
 
   MenuButton.prototype = {
     __proto__: HTMLButtonElement.prototype,
@@ -345,6 +352,7 @@ cr.define('cr.ui', function() {
   };
 
   // Export
+  // #cr_define_end
   return {
     HideType: HideType,
     MenuButton: MenuButton,

ui/webui/resources/js/cr/ui/menu_item.js

@@ -2,8 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {loadTimeData} from '../../load_time_data.m.js';
+// #import {assert} from '../../assert.m.js';
+// #import {Command} from './command.m.js';
+// #import {define as crUiDefine, decorate, swallowDoubleClick} from '../ui.m.js';
+// #import {getPropertyDescriptor, PropertyKind} from '../../cr.m.js';
+// clang-format on
+
 cr.define('cr.ui', function() {
-  /** @const */ const Command = cr.ui.Command;
+  /* #ignore */ const Command = cr.ui.Command;
 
   /**
    * Creates a new menu item element.
@@ -12,7 +20,7 @@ cr.define('cr.ui', function() {
    * @extends {HTMLElement}
    * @implements {EventListener}
    */
-  const MenuItem = cr.ui.define('cr-menu-item');
+  /* #export */ const MenuItem = cr.ui.define('cr-menu-item');
 
   /**
    * Creates a new menu separator element.
@@ -20,7 +28,9 @@ cr.define('cr.ui', function() {
    */
   MenuItem.createSeparator = function() {
     const el = /** @type {!cr.ui.MenuItem} */ (document.createElement('hr'));
-    MenuItem.decorate(el);
+    if (MenuItem.decorate) {
+      MenuItem.decorate(el);
+    }
     return el;
   };
 
@@ -251,32 +261,50 @@ cr.define('cr.ui', function() {
       }
     }
   };
-
   /**
    * Whether the menu item is disabled or not.
+   * @type {boolean}
    */
-  cr.defineProperty(MenuItem, 'disabled', cr.PropertyKind.BOOL_ATTR);
+  MenuItem.prototype.disabled;
+  Object.defineProperty(
+      MenuItem.prototype, 'disabled',
+      cr.getPropertyDescriptor('disabled', cr.PropertyKind.BOOL_ATTR));
 
   /**
    * Whether the menu item is hidden or not.
    */
-  cr.defineProperty(MenuItem, 'hidden', cr.PropertyKind.BOOL_ATTR);
+  Object.defineProperty(
+      MenuItem.prototype, 'hidden',
+      cr.getPropertyDescriptor('hidden', cr.PropertyKind.BOOL_ATTR));
 
   /**
    * Whether the menu item is selected or not.
+   * @type {boolean}
    */
-  cr.defineProperty(MenuItem, 'selected', cr.PropertyKind.BOOL_ATTR);
+  MenuItem.prototype.selected;
+  Object.defineProperty(
+      MenuItem.prototype, 'selected',
+      cr.getPropertyDescriptor('selected', cr.PropertyKind.BOOL_ATTR));
 
   /**
    * Whether the menu item is checked or not.
+   * @type {boolean}
    */
-  cr.defineProperty(MenuItem, 'checked', cr.PropertyKind.BOOL_ATTR);
+  MenuItem.prototype.checked;
+  Object.defineProperty(
+      MenuItem.prototype, 'checked',
+      cr.getPropertyDescriptor('checked', cr.PropertyKind.BOOL_ATTR));
 
   /**
    * Whether the menu item is checkable or not.
+   * @type {boolean}
    */
-  cr.defineProperty(MenuItem, 'checkable', cr.PropertyKind.BOOL_ATTR);
+  MenuItem.prototype.checkable;
+  Object.defineProperty(
+      MenuItem.prototype, 'checkable',
+      cr.getPropertyDescriptor('checkable', cr.PropertyKind.BOOL_ATTR));
 
   // Export
+  // #cr_define_end
   return {MenuItem: MenuItem};
 });

ui/webui/resources/webui_resources.grd

@@ -89,9 +89,33 @@ without changes to the corresponding grd file. -->
         <include name="IDR_WEBUI_JS_CR_UI_ARRAY_DATA_MODEL_M_JS"
                  file="${root_gen_dir}/ui/webui/resources/js/cr/ui/array_data_model.m.js"
                  use_base_dir="false" type="BINDATA" />
+        <include name="IDR_WEBUI_JS_CR_UI_COMMAND_M_JS"
+                 file="${root_gen_dir}/ui/webui/resources/js/cr/ui/command.m.js"
+                 use_base_dir="false" type="BINDATA" />
+        <include name="IDR_WEBUI_JS_CR_UI_CONTEXT_MENU_HANDLER_M_JS"
+                 file="${root_gen_dir}/ui/webui/resources/js/cr/ui/context_menu_handler.m.js"
+                 use_base_dir="false" type="BINDATA" />
         <include name="IDR_WEBUI_JS_CR_UI_DIALOGS_M_JS"
                  file="${root_gen_dir}/ui/webui/resources/js/cr/ui/dialogs.m.js"
                  use_base_dir="false" type="BINDATA" />
+        <include name="IDR_WEBUI_JS_CR_UI_GRID_M_JS"
+                 file="${root_gen_dir}/ui/webui/resources/js/cr/ui/grid.m.js"
+                 use_base_dir="false" type="BINDATA" />
+        <include name="IDR_WEBUI_JS_CR_UI_MENU_M_JS"
+                 file="${root_gen_dir}/ui/webui/resources/js/cr/ui/menu.m.js"
+                 use_base_dir="false" type="BINDATA" />
+        <include name="IDR_WEBUI_JS_CR_UI_MENU_BUTTON_M_JS"
+                 file="${root_gen_dir}/ui/webui/resources/js/cr/ui/menu_button.m.js"
+                 use_base_dir="false" type="BINDATA" />
+        <include name="IDR_WEBUI_JS_CR_UI_MENU_ITEM_M_JS"
+                 file="${root_gen_dir}/ui/webui/resources/js/cr/ui/menu_item.m.js"
+                 use_base_dir="false" type="BINDATA" />
+        <include name="IDR_WEBUI_JS_CR_UI_LIST_M_JS"
+                 file="${root_gen_dir}/ui/webui/resources/js/cr/ui/list.m.js"
+                 use_base_dir="false" type="BINDATA" />
+        <include name="IDR_WEBUI_JS_CR_UI_LIST_ITEM_M_JS"
+                 file="${root_gen_dir}/ui/webui/resources/js/cr/ui/list_item.m.js"
+                 use_base_dir="false" type="BINDATA" />
         <include name="IDR_WEBUI_JS_CR_UI_LIST_SELECTION_CONTROLLER_M_JS"
                  file="${root_gen_dir}/ui/webui/resources/js/cr/ui/list_selection_controller.m.js"
                  use_base_dir="false" type="BINDATA" />
@@ -107,6 +131,9 @@ without changes to the corresponding grd file. -->
         <include name="IDR_WEBUI_JS_CR_UI_SPLITTER_M_JS"
                  file="${root_gen_dir}/ui/webui/resources/js/cr/ui/splitter.m.js"
                  use_base_dir="false" type="BINDATA" />
+        <include name="IDR_WEBUI_JS_CR_UI_TREE_M_JS"
+                 file="${root_gen_dir}/ui/webui/resources/js/cr/ui/tree.m.js"
+                 use_base_dir="false" type="BINDATA" />
       </if>
       <!-- Web UI shared JS module resources. -->
       <include name="IDR_WEBUI_JS_ASSERT_M_JS"