Migrate chrome://quota-internals to use JS modules.

 - Generate a JS module for cr/ui/tabs.js. In order to do so
   changing cr.defineProperty() to Object.defineProperty() as
   done for other cr.ui elements as part of crbug.com/1133198
 - Include tabs.m.js, tree.m.js and ui.m.js in Desktop builds.
 - Fix getPropertyDescriptor() signature in cr.m.js to address
   JS compiler errors when used from tabs.m.js.
 - Update chrome://quota-internals to use the module versions of
   its dependencies.

Bug: 1028829
Change-Id: Icf6576d4111f7bc7481b1a105b80d76ebe4d91d7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2478887
Commit-Queue: dpapad <dpapad@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#818839}

chrome/browser/resources/quota_internals/BUILD.gn

@@ -7,6 +7,7 @@ import("//third_party/closure_compiler/compile_js.gni")
 import("//tools/grit/grit_rule.gni")
 
 js_type_check("closure_compile") {
+  uses_js_modules = true
   deps = [
     ":event_handler",
     ":message_dispatcher",
@@ -15,15 +16,16 @@ js_type_check("closure_compile") {
 
 js_library("event_handler") {
   deps = [
-    "//ui/webui/resources/js:cr",
-    "//ui/webui/resources/js:util",
-    "//ui/webui/resources/js/cr/ui:tabs",
-    "//ui/webui/resources/js/cr/ui:tree",
+    ":message_dispatcher",
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js:util.m",
+    "//ui/webui/resources/js/cr:ui.m",
+    "//ui/webui/resources/js/cr/ui:tabs.m",
+    "//ui/webui/resources/js/cr/ui:tree.m",
   ]
 }
 
 js_library("message_dispatcher") {
-  deps = [ "//ui/webui/resources/js:cr" ]
 }
 
 grit("quota_internals_resources") {

chrome/browser/resources/quota_internals/event_handler.js

@@ -2,15 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// require cr.js
-// require cr/event_target.js
-// require cr/ui.js
-// require cr/ui/tabs.js
-// require cr/ui/tree.js
-// require cr/util.js
+import {addWebUIListener} from 'chrome://resources/js/cr.m.js';
+import {decorate} from 'chrome://resources/js/cr/ui.m.js';
+import {TabBox} from 'chrome://resources/js/cr/ui/tabs.m.js';
+import {Tree, TreeItem} from 'chrome://resources/js/cr/ui/tree.m.js';
+import {$} from 'chrome://resources/js/util.m.js';
 
-(function() {
-'use strict';
+import {requestInfo, triggerStoragePressure} from './message_dispatcher.js';
 
 /**
  * @param {Object} object Object to be checked.
@@ -160,7 +158,7 @@ let availableSpace = undefined;
 /**
  * Root of the quota data tree,
  * holding userdata as |treeViewObject.detail|.
- * @type {cr.ui.Tree}
+ * @type {Tree}
  */
 let treeViewObject;
 
@@ -174,12 +172,12 @@ const statistics = {};
 
 /**
  * Initialize and return |treeViewObject|.
- * @return {!cr.ui.Tree} Initialized |treeViewObject|.
+ * @return {!Tree} Initialized |treeViewObject|.
  */
 function getTreeViewObject() {
   if (!treeViewObject) {
-    treeViewObject = /** @type {!cr.ui.Tree} */ ($('tree-view'));
-    cr.ui.decorate(treeViewObject, cr.ui.Tree);
+    treeViewObject = /** @type {!Tree} */ ($('tree-view'));
+    decorate(treeViewObject, Tree);
     treeViewObject.detail = {payload: {}, children: {}};
     treeViewObject.addEventListener('change', updateDescription);
   }
@@ -189,14 +187,14 @@ function getTreeViewObject() {
 /**
  * Initialize and return a tree item, that represents specified storage type.
  * @param {!string} type Storage type.
- * @return {cr.ui.TreeItem} Initialized |storageObject|.
+ * @return {TreeItem} Initialized |storageObject|.
  */
 function getStorageObject(type) {
   const treeViewObject = getTreeViewObject();
   let storageObject = treeViewObject.detail.children[type];
   if (!storageObject) {
     storageObject =
-        new cr.ui.TreeItem({label: type, detail: {payload: {}, children: {}}});
+        new TreeItem({label: type, detail: {payload: {}, children: {}}});
     storageObject.mayHaveChildren_ = true;
     treeViewObject.detail.children[type] = storageObject;
     treeViewObject.add(storageObject);
@@ -209,14 +207,14 @@ function getStorageObject(type) {
  *  storage type and hostname.
  * @param {!string} type Storage type.
  * @param {!string} host Hostname.
- * @return {cr.ui.TreeItem} Initialized |hostObject|.
+ * @return {TreeItem} Initialized |hostObject|.
  */
 function getHostObject(type, host) {
   const storageObject = getStorageObject(type);
   let hostObject = storageObject.detail.children[host];
   if (!hostObject) {
     hostObject =
-        new cr.ui.TreeItem({label: host, detail: {payload: {}, children: {}}});
+        new TreeItem({label: host, detail: {payload: {}, children: {}}});
     hostObject.mayHaveChildren_ = true;
     storageObject.detail.children[host] = hostObject;
     storageObject.add(hostObject);
@@ -230,14 +228,14 @@ function getHostObject(type, host) {
  * @param {!string} type Storage type.
  * @param {!string} host Hostname.
  * @param {!string} origin Origin URL.
- * @return {cr.ui.TreeItem} Initialized |originObject|.
+ * @return {TreeItem} Initialized |originObject|.
  */
 function getOriginObject(type, host, origin) {
   const hostObject = getHostObject(type, host);
   let originObject = hostObject.detail.children[origin];
   if (!originObject) {
-    originObject = new cr.ui.TreeItem(
-        {label: origin, detail: {payload: {}, children: {}}});
+    originObject =
+        new TreeItem({label: origin, detail: {payload: {}, children: {}}});
     originObject.mayHaveChildren_ = false;
     hostObject.detail.children[origin] = originObject;
     hostObject.add(originObject);
@@ -428,7 +426,7 @@ function updateDescription() {
 
 /**
  * Dump |treeViewObject| or subtree to a object.
- * @param {(cr.ui.Tree|cr.ui.TreeItem)=} opt_treeitem
+ * @param {(Tree|TreeItem)=} opt_treeitem
  * @return {Object} Dump result object from |treeViewObject|.
  */
 function dumpTreeToObj(opt_treeitem) {
@@ -479,25 +477,23 @@ function dump() {
 }
 
 function onLoad() {
-  cr.ui.decorate('tabbox', cr.ui.TabBox);
+  decorate('tabbox', TabBox);
 
-  cr.addWebUIListener('AvailableSpaceUpdated', handleAvailableSpace);
-  cr.addWebUIListener('GlobalInfoUpdated', handleGlobalInfo);
-  cr.addWebUIListener('PerHostInfoUpdated', handlePerHostInfo);
-  cr.addWebUIListener('PerOriginInfoUpdated', handlePerOriginInfo);
-  cr.addWebUIListener('StatisticsUpdated', handleStatistics);
-  cr.addWebUIListener(
-      'StoragePressureFlagUpdated', handleStoragePressureFlagInfo);
+  addWebUIListener('AvailableSpaceUpdated', handleAvailableSpace);
+  addWebUIListener('GlobalInfoUpdated', handleGlobalInfo);
+  addWebUIListener('PerHostInfoUpdated', handlePerHostInfo);
+  addWebUIListener('PerOriginInfoUpdated', handlePerOriginInfo);
+  addWebUIListener('StatisticsUpdated', handleStatistics);
+  addWebUIListener('StoragePressureFlagUpdated', handleStoragePressureFlagInfo);
 
-  cr.quota.requestInfo();
+  requestInfo();
 
-  $('refresh-button').addEventListener('click', cr.quota.requestInfo, false);
+  $('refresh-button').addEventListener('click', requestInfo, false);
   $('dump-button').addEventListener('click', dump, false);
   $('trigger-notification').addEventListener('click', () => {
     const origin = $('storage-pressure-origin').value;
-    cr.quota.triggerStoragePressure(origin);
+    triggerStoragePressure(origin);
   }, false);
 }
 
 document.addEventListener('DOMContentLoaded', onLoad, false);
-})();

chrome/browser/resources/quota_internals/main.html

@@ -10,19 +10,10 @@ found in the LICENSE file.
 <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
 <link rel="stylesheet" href="main.css">
 
-<script src="chrome://resources/js/util.js"></script>
-<script src="chrome://resources/js/cr.js"></script>
-<script src="chrome://resources/js/cr/event_target.js"></script>
-
 <link rel="stylesheet" href="chrome://resources/css/tabs.css">
 <link rel="stylesheet" href="chrome://resources/css/tree.css">
-<script src="chrome://resources/js/cr/ui.js"></script>
-<script src="chrome://resources/js/cr/ui/tabs.js"></script>
-<script src="chrome://resources/js/cr/ui/tree.js"></script>
-<script src="chrome://resources/js/cr/ui/focus_outline_manager.js"></script>
 
-<script src="chrome://quota-internals/message_dispatcher.js"></script>
-<script src="chrome://quota-internals/event_handler.js"></script>
+<script type="module" src="event_handler.js"></script>
 
 <body>
 

chrome/browser/resources/quota_internals/message_dispatcher.js

@@ -2,35 +2,21 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// require cr.js
-
 /**
  * Bridge between the browser and the page.
  * In this file:
- *   * define interface to request data to the browser.
+ *   * define interface to request data from the browser.
  */
 
-cr.define('cr.quota', function() {
-  'use strict';
-
-  /**
-   * Post requestInfo message to Browser.
-   */
-  function requestInfo() {
-    chrome.send('requestInfo');
-  }
-
-  /**
-   * Post triggerStoragePressure message to Browser.
-   */
-  function triggerStoragePressure(origin) {
-    chrome.send('triggerStoragePressure', [origin]);
-  }
-
+/** Post requestInfo message to Browser. */
+export function requestInfo() {
+  chrome.send('requestInfo');
+}
 
-
-  return {
-    requestInfo: requestInfo,
-    triggerStoragePressure: triggerStoragePressure,
-  };
-});
+/**
+ * Post triggerStoragePressure message to Browser.
+ * @param {string} origin
+ */
+export function triggerStoragePressure(origin) {
+  chrome.send('triggerStoragePressure', [origin]);
+}

chrome/browser/resources/quota_internals/quota_internals_resources.grd

@@ -8,7 +8,7 @@
   </outputs>
   <release seq="1">
     <includes>
-      <include name="IDR_QUOTA_INTERNALS_MAIN_HTML" file="main.html" flattenhtml="true" allowexternalscript="true" type="BINDATA"/>
+      <include name="IDR_QUOTA_INTERNALS_MAIN_HTML" file="main.html" type="BINDATA"/>
       <include name="IDR_QUOTA_INTERNALS_EVENT_HANDLER_JS" file="event_handler.js" type="BINDATA"/>
       <include name="IDR_QUOTA_INTERNALS_MESSAGE_DISPATCHER_JS" file="message_dispatcher.js" type="BINDATA"/>
     </includes>

ui/webui/resources/js/cr.m.js

@@ -366,7 +366,7 @@ function getSetter(name, kind, opt_setHook) {
  * event with the type {@code name + 'Change'} is fired.
  * @param {string} name The name of the property.
  * @param {PropertyKind=} opt_kind What kind of underlying storage to use.
- * @param {function(*, *):void=} opt_setHook A function to run after the
+ * @param {function(?, ?):void=} opt_setHook A function to run after the
  *     property is set, but before the propertyChange event is fired.
  */
 export function getPropertyDescriptor(name, opt_kind, opt_setHook) {

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

@@ -272,6 +272,7 @@ js_modulizer("modulize") {
     "splitter.js",
     "store.js",
     "store_client.js",
+    "tabs.js",
     "tree.js",
   ]
   namespace_rewrites = [
@@ -306,6 +307,7 @@ js_modulizer("modulize") {
     "cr.ui.swallowDoubleClick|swallowDoubleClick",
     "cr.ui.Size|Size",
     "cr.ui.StoreObserver|StoreObserver",
+    "cr.ui.Tab|Tab",
     "cr.ui.Tree|Tree",
     "cr.ui.TreeItem|TreeItem",
     "cr.ui.VirtualFocusRow|VirtualFocusRow",
@@ -339,6 +341,7 @@ js_type_check("ui_resources_modules") {
     ":splitter.m",
     ":store.m",
     ":store_client.m",
+    ":tabs.m",
     ":tree.m",
   ]
 }
@@ -574,6 +577,17 @@ js_library("store_client.m") {
   extra_deps = [ ":modulize" ]
 }
 
+js_library("tabs.m") {
+  sources = [ "$root_gen_dir/ui/webui/resources/js/cr/ui/tabs.m.js" ]
+  deps = [
+    ":focus_outline_manager.m",
+    "..:ui.m",
+    "../..:cr.m",
+    "../..:util.m",
+  ]
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("tree.m") {
   sources = [ "$root_gen_dir/ui/webui/resources/js/cr/ui/tree.m.js" ]
   deps = [

ui/webui/resources/js/cr/ui/tabs.js

@@ -2,6 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// #import {decorate} from '../ui.m.js';
+// #import {define as crUiDefine} from '../ui.m.js';
+// #import {findAncestor} from '../../util.m.js';
+// #import {FocusOutlineManager} from './focus_outline_manager.m.js';
+// #import {isMac, getPropertyDescriptor, PropertyKind} from '../../cr.m.js';
+
 cr.define('cr.ui', function() {
   /**
    * Returns the TabBox for a Tab or a TabPanel.
@@ -89,7 +95,7 @@ cr.define('cr.ui', function() {
    * @constructor
    * @extends {HTMLElement}
    */
-  const TabBox = cr.ui.define('tabbox');
+  /* #export */ const TabBox = cr.ui.define('tabbox');
 
   TabBox.prototype = {
     __proto__: HTMLElement.prototype,
@@ -120,8 +126,11 @@ cr.define('cr.ui', function() {
    * The index of the selected tab or -1 if no tab is selected.
    * @type {number}
    */
-  cr.defineProperty(
-      TabBox, 'selectedIndex', cr.PropertyKind.JS, selectedIndexSetHook);
+  TabBox.prototype.selectedIndex;
+  Object.defineProperty(
+      TabBox.prototype, 'selectedIndex',
+      cr.getPropertyDescriptor(
+          'selectedIndex', cr.PropertyKind.JS, selectedIndexSetHook));
 
   /**
    * Creates a new tabs element.
@@ -129,7 +138,7 @@ cr.define('cr.ui', function() {
    * @constructor
    * @extends {HTMLElement}
    */
-  const Tabs = cr.ui.define('tabs');
+  /* #export */ const Tabs = cr.ui.define('tabs');
   Tabs.prototype = {
     __proto__: HTMLElement.prototype,
     decorate() {
@@ -186,7 +195,7 @@ cr.define('cr.ui', function() {
    * @constructor
    * @extends {HTMLElement}
    */
-  const Tab = cr.ui.define('tab');
+  /* #export */ const Tab = cr.ui.define('tab');
   Tab.prototype = {
     __proto__: HTMLElement.prototype,
     decorate() {
@@ -201,7 +210,10 @@ cr.define('cr.ui', function() {
    * Whether the tab is selected.
    * @type {boolean}
    */
-  cr.defineProperty(Tab, 'selected', cr.PropertyKind.BOOL_ATTR);
+  Tab.prototype.selected;
+  Object.defineProperty(
+      Tab.prototype, 'selected',
+      cr.getPropertyDescriptor('selected', cr.PropertyKind.BOOL_ATTR));
 
   /**
    * Creates a new tabpanels element.
@@ -209,7 +221,7 @@ cr.define('cr.ui', function() {
    * @constructor
    * @extends {HTMLElement}
    */
-  const TabPanels = cr.ui.define('tabpanels');
+  /* #export */ const TabPanels = cr.ui.define('tabpanels');
   TabPanels.prototype = {
     __proto__: HTMLElement.prototype,
     decorate: decorateChildren
@@ -221,15 +233,19 @@ cr.define('cr.ui', function() {
    * @constructor
    * @extends {HTMLElement}
    */
-  const TabPanel = cr.ui.define('tabpanel');
+  /* #export */ const TabPanel = cr.ui.define('tabpanel');
   TabPanel.prototype = {__proto__: HTMLElement.prototype, decorate() {}};
 
   /**
    * Whether the tab is selected.
    * @type {boolean}
    */
-  cr.defineProperty(TabPanel, 'selected', cr.PropertyKind.BOOL_ATTR);
+  TabPanel.prototype.selected;
+  Object.defineProperty(
+      TabPanel.prototype, 'selected',
+      cr.getPropertyDescriptor('selected', cr.PropertyKind.BOOL_ATTR));
 
+  // #cr_define_end
   return {
     TabBox: TabBox,
     Tabs: Tabs,

ui/webui/resources/webui_resources.grd

@@ -84,9 +84,6 @@ without changes to the corresponding grd file. -->
                file="images/throbber_small.svg" type="BINDATA" />
       <!-- Web UI JS module resources (used only in ChromeOS). -->
       <if expr="chromeos">
-        <include name="IDR_WEBUI_JS_CR_UI_M_JS"
-                 file="${root_gen_dir}/ui/webui/resources/js/cr/ui.m.js"
-                 use_base_dir="false" type="BINDATA" />
         <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" />
@@ -132,9 +129,6 @@ 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"
@@ -163,12 +157,21 @@ without changes to the corresponding grd file. -->
       <include name="IDR_WEBUI_JS_CR_UI_KEYBOARD_SHORTCUT_LIST_M_JS"
                file="${root_gen_dir}/ui/webui/resources/js/cr/ui/keyboard_shortcut_list.m.js"
                use_base_dir="false" type="BINDATA" />
+      <include name="IDR_WEBUI_JS_CR_UI_M_JS"
+               file="${root_gen_dir}/ui/webui/resources/js/cr/ui.m.js"
+               use_base_dir="false" type="BINDATA" />
       <include name="IDR_WEBUI_JS_CR_UI_STORE_M_JS"
                file="${root_gen_dir}/ui/webui/resources/js/cr/ui/store.m.js"
                use_base_dir="false" type="BINDATA" />
       <include name="IDR_WEBUI_JS_CR_UI_STORE_CLIENT_M_JS"
                file="${root_gen_dir}/ui/webui/resources/js/cr/ui/store_client.m.js"
                use_base_dir="false" type="BINDATA" />
+      <include name="IDR_WEBUI_JS_CR_UI_TABS_M_JS"
+               file="${root_gen_dir}/ui/webui/resources/js/cr/ui/tabs.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" />
       <include name="IDR_WEBUI_JS_EVENT_TRACKER_M_JS"
                file="${root_gen_dir}/ui/webui/resources/js/event_tracker.m.js"
                use_base_dir="false" type="BINDATA" />