[DevTools] Replace most ui/legacy/components/ globals with imports.

This CL replaces legacy globals for the following ui/legacy/components/
with proper ECMAScript imports:

- color_picker
- cookie_table (with fix for constructor parameters)
- data_grid (with fixes for constructor parameters)
- inline_editor
- object_ui
- quick_open

Bug: chromium:1442410
Change-Id: I559ab8a1dd29077a5ba506461d3f46723328e800
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4941731
Auto-Submit: Benedikt Meurer <bmeurer@chromium.org>
Commit-Queue: Benedikt Meurer <bmeurer@chromium.org>
Reviewed-by: Simon Zünd <szuend@chromium.org>
Commit-Queue: Simon Zünd <szuend@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1210035}

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/quick-open-a11y-test.js

@@ -5,17 +5,17 @@
 import {TestRunner} from 'test_runner';
 import {AxeCoreTestRunner} from 'axe_core_test_runner';
 
+import * as QuickOpen from 'devtools/ui/legacy/components/quick_open/quick_open.js';
 import * as UIModule from 'devtools/ui/legacy/legacy.js';
 
 (async function() {
   TestRunner.addResult('Test accessibility in Quick Open dialog\n');
-  await TestRunner.loadLegacyModule('quick_open');
 
-  QuickOpen.QuickOpen.show('');
+  QuickOpen.QuickOpen.QuickOpenImpl.show('');
 
   const dialogWidget = UIModule.Dialog.Dialog.instance.widget();
   const filteredListWidget = dialogWidget.defaultFocusedChild;
-  TestRunner.assertTrue(filteredListWidget instanceof QuickOpen.FilteredListWidget);
+  TestRunner.assertTrue(filteredListWidget instanceof QuickOpen.FilteredListWidget.FilteredListWidget);
 
   await AxeCoreTestRunner.runValidation(filteredListWidget.contentElement);
   TestRunner.completeTest();

third_party/blink/web_tests/http/tests/devtools/a11y-axe-core/sources/scope-pane-a11y-test.js

@@ -6,6 +6,7 @@ import {TestRunner} from 'test_runner';
 import {AxeCoreTestRunner} from 'axe_core_test_runner';
 import {SourcesTestRunner} from 'sources_test_runner';
 
+import * as ObjectUI from 'devtools/ui/legacy/components/object_ui/object_ui.js';
 import * as Sources from 'devtools/panels/sources/sources.js';
 import * as UI from 'devtools/ui/legacy/legacy.js';
 
@@ -30,14 +31,14 @@ import * as UI from 'devtools/ui/legacy/legacy.js';
 
   await TestRunner.addSnifferPromise(Sources.ScopeChainSidebarPane.ScopeChainSidebarPane.prototype, 'sidebarPaneUpdatedForTest');
   const scopePane = Sources.ScopeChainSidebarPane.ScopeChainSidebarPane.instance();
-  await TestRunner.addSnifferPromise(ObjectUI.ObjectPropertyTreeElement, 'populateWithProperties');
+  await TestRunner.addSnifferPromise(ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement, 'populateWithProperties');
   TestRunner.addResult(`Scope pane content: ${scopePane.contentElement.deepTextContent()}`);
   TestRunner.addResult(`Running the axe-core linter on the scope pane.`);
   await AxeCoreTestRunner.runValidation(scopePane.contentElement);
 
   TestRunner.addResult('Expanding the makeClosure closure.');
   scopePane.treeOutline.rootElement().childAt(1).expand();
-  await TestRunner.addSnifferPromise(ObjectUI.ObjectPropertyTreeElement, 'populateWithProperties');
+  await TestRunner.addSnifferPromise(ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement, 'populateWithProperties');
   TestRunner.addResult(`Scope pane content: ${scopePane.contentElement.deepTextContent()}`);
   TestRunner.addResult(`Running the axe-core linter on the scope pane.`);
   await AxeCoreTestRunner.runValidation(scopePane.contentElement);

third_party/blink/web_tests/http/tests/devtools/components/cookies-table.js

@@ -4,6 +4,7 @@
 
 import {TestRunner} from 'test_runner';
 
+import * as CookieTable from 'devtools/ui/legacy/components/cookie_table/cookie_table.js';
 import * as SDK from 'devtools/core/sdk/sdk.js';
 
 (async function() {
@@ -92,7 +93,7 @@ import * as SDK from 'devtools/core/sdk/sdk.js';
   }
 
   function createSortAndDumpCookies(cookieData, sortColumn, isAsc) {
-    const table = new CookieTable.CookiesTable(SDK.TargetManager.TargetManager.instance().rootTarget(), true);
+    const table = new CookieTable.CookiesTable.CookiesTable(true);
     const cookies = cookieData.map(createCookie);
     table.dataGrid = mockDataGrid({sortColumn, isAsc});
     table.sortCookies(cookies);
@@ -101,7 +102,7 @@ import * as SDK from 'devtools/core/sdk/sdk.js';
   }
 
   function createBuildAndDumpTable(cookieData, selectedNode, isAsc, lastEditedColumn) {
-    const table = new CookieTable.CookiesTable(SDK.TargetManager.TargetManager.instance().rootTarget(), true);
+    const table = new CookieTable.CookiesTable.CookiesTable(true);
     const cookies = cookieData && cookieData.map(createCookie);
     const rootNode = mockNode({});
     table.lastEditedColumnId = lastEditedColumn || null;
@@ -158,6 +159,5 @@ import * as SDK from 'devtools/core/sdk/sdk.js';
     TestRunner.completeTest();
   }
 
-  await TestRunner.loadLegacyModule('cookie_table');
   run();
 })();

third_party/blink/web_tests/http/tests/devtools/components/css-shadow-model.js

@@ -4,9 +4,10 @@
 
 import {TestRunner} from 'test_runner';
 
+import * as InlineEditor from 'devtools/ui/legacy/components/inline_editor/inline_editor.js';
+
 (async function() {
   TestRunner.addResult(`Tests CSSLength.parse, CSSShadowModel.parseTextShadow, and CSSShadowModel.parseBoxShadow.\n`);
-  await TestRunner.loadLegacyModule("inline_editor");
 
   TestRunner.addResult('-----CSSLengths-----');
   dumpCSSLength('10px');
@@ -90,7 +91,7 @@ import {TestRunner} from 'test_runner';
   TestRunner.completeTest();
 
   function dumpCSSLength(lengthText) {
-    var length = InlineEditor.CSSLength.parse(lengthText);
+    var length = InlineEditor.CSSShadowModel.CSSLength.parse(lengthText);
     var statusText = length !== null ? 'Succeeded: ' + length.asCSSText() : 'Failed';
     TestRunner.addResult('"' + lengthText + '", Parsing ' + statusText);
   }
@@ -104,8 +105,8 @@ import {TestRunner} from 'test_runner';
   }
 
   function dumpShadow(shadowText, isBoxShadow) {
-    var shadows = isBoxShadow ? InlineEditor.CSSShadowModel.parseBoxShadow(shadowText) :
-                                InlineEditor.CSSShadowModel.parseTextShadow(shadowText);
+    var shadows = isBoxShadow ? InlineEditor.CSSShadowModel.CSSShadowModel.parseBoxShadow(shadowText) :
+                                InlineEditor.CSSShadowModel.CSSShadowModel.parseTextShadow(shadowText);
     var output = [];
     for (var i = 0; i < shadows.length; i++)
       output.push(shadows[i].asCSSText());

third_party/blink/web_tests/http/tests/devtools/components/datagrid-autosize.js

@@ -4,14 +4,15 @@
 
 import {TestRunner} from 'test_runner';
 
+import * as DataGrid from 'devtools/ui/legacy/components/data_grid/data_grid.js';
+
 (async function() {
   TestRunner.addResult(`Tests DataGrid column auto size calculation.\n`);
-  await TestRunner.loadLegacyModule('data_grid')
 
   function testAutoSize(widths, minPercent, maxPercent) {
     TestRunner.addResult(
         'Auto sizing ' + JSON.stringify(widths) + ', minPercent=' + minPercent + ', maxPercent=' + maxPercent);
-    var result = DataGrid.DataGrid.prototype.autoSizeWidths(widths, minPercent, maxPercent);
+    var result = DataGrid.DataGrid.DataGridImpl.prototype.autoSizeWidths(widths, minPercent, maxPercent);
     TestRunner.addResult('    ' + JSON.stringify(result));
   }
 

third_party/blink/web_tests/http/tests/devtools/components/datagrid.js

@@ -5,9 +5,10 @@
 import {TestRunner} from 'test_runner';
 import {DataGridTestRunner} from 'data_grid_test_runner';
 
+import * as DataGrid from 'devtools/ui/legacy/components/data_grid/data_grid.js';
+
 (async function() {
   TestRunner.addResult(`Tests ViewportDataGrid.\n`);
-  await TestRunner.loadLegacyModule('data_grid');
 
   function attach(parent, child, index) {
     var parentName = parent === root ? 'root' : parent.data.id;
@@ -42,14 +43,14 @@ import {DataGridTestRunner} from 'data_grid_test_runner';
     TestRunner.addResult('Collapsed node ' + node.data.id);
   }
 
-  var columns = [{id: 'id'}];
-  var dataGrid = new DataGrid.DataGrid({displayName: 'Test', columns});
-  var a = new DataGrid.DataGridNode({id: 'a'});
-  var aa = new DataGrid.DataGridNode({id: 'aa'});
-  var aaa = new DataGrid.DataGridNode({id: 'aaa'});
-  var aab = new DataGrid.DataGridNode({id: 'aab'});
-  var ab = new DataGrid.DataGridNode({id: 'ab'});
-  var b = new DataGrid.DataGridNode({id: 'b'});
+  var columns = [{id: 'id', sortable: false}];
+  var dataGrid = new DataGrid.DataGrid.DataGridImpl({displayName: 'Test', columns});
+  var a = new DataGrid.DataGrid.DataGridNode({id: 'a'});
+  var aa = new DataGrid.DataGrid.DataGridNode({id: 'aa'});
+  var aaa = new DataGrid.DataGrid.DataGridNode({id: 'aaa'});
+  var aab = new DataGrid.DataGrid.DataGridNode({id: 'aab'});
+  var ab = new DataGrid.DataGrid.DataGridNode({id: 'ab'});
+  var b = new DataGrid.DataGrid.DataGridNode({id: 'b'});
 
   var root = dataGrid.rootNode();
 
@@ -89,7 +90,7 @@ import {DataGridTestRunner} from 'data_grid_test_runner';
   dumpNodes();
   attach(aa, aaa);
   attach(aa, aab);
-  var aac = new DataGrid.DataGridNode({id: 'aac'});
+  var aac = new DataGrid.DataGrid.DataGridNode({id: 'aac'});
   attach(aa, aac);
   dumpNodes();
   attach(aa, aac, 0);
@@ -113,14 +114,14 @@ import {DataGridTestRunner} from 'data_grid_test_runner';
   root.removeChildren();
   dumpNodes();
 
-  var columns = [{id: 'id'}];
-  var dataGrid = new DataGrid.DataGrid({displayName: 'Test', columns});
-  var a = new DataGrid.DataGridNode({id: 'TextData', secondCol: 'a foo'});
-  var b = new DataGrid.DataGridNode({id: 'NullData', secondCol: null});
+  var columns = [{id: 'id', sortable: false}];
+  var dataGrid = new DataGrid.DataGrid.DataGridImpl({displayName: 'Test', columns});
+  var a = new DataGrid.DataGrid.DataGridNode({id: 'TextData', secondCol: 'a foo'});
+  var b = new DataGrid.DataGrid.DataGridNode({id: 'NullData', secondCol: null});
   var root = dataGrid.rootNode();
   attach(root, a);
   dumpNodes();
-  dataGrid.addColumn({id: 'secondCol'});
+  dataGrid.addColumn({id: 'secondCol', sortable: false});
   TestRunner.addResult('Added secondCol');
   dumpNodes();
   attach(root, b);

third_party/blink/web_tests/http/tests/devtools/components/viewport-datagrid.js

@@ -5,9 +5,10 @@
 import {TestRunner} from 'test_runner';
 import {DataGridTestRunner} from 'data_grid_test_runner';
 
+import * as DataGrid from 'devtools/ui/legacy/components/data_grid/data_grid.js';
+
 (async function() {
   TestRunner.addResult(`Tests ViewportDataGrid.\n`);
-  await TestRunner.loadLegacyModule('data_grid');
 
   function attach(parent, child, index) {
     var parentName = parent === root ? 'root' : parent.data.id;
@@ -60,14 +61,14 @@ import {DataGridTestRunner} from 'data_grid_test_runner';
       TestRunner.addResult(node.data.id);
   }
 
-  var columns = [{id: 'id', title: 'ID column', width: '250px'}];
-  var dataGrid = new DataGrid.ViewportDataGrid({displayName: 'Test', columns});
-  var a = new DataGrid.ViewportDataGridNode({id: 'a'});
-  var aa = new DataGrid.ViewportDataGridNode({id: 'aa'});
-  var aaa = new DataGrid.ViewportDataGridNode({id: 'aaa'});
-  var aab = new DataGrid.ViewportDataGridNode({id: 'aab'});
-  var ab = new DataGrid.ViewportDataGridNode({id: 'ab'});
-  var b = new DataGrid.ViewportDataGridNode({id: 'b'});
+  var columns = [{id: 'id', width: '250px', sortable: false}];
+  var dataGrid = new DataGrid.ViewportDataGrid.ViewportDataGrid({displayName: 'Test', columns});
+  var a = new DataGrid.ViewportDataGrid.ViewportDataGridNode({id: 'a'});
+  var aa = new DataGrid.ViewportDataGrid.ViewportDataGridNode({id: 'aa'});
+  var aaa = new DataGrid.ViewportDataGrid.ViewportDataGridNode({id: 'aaa'});
+  var aab = new DataGrid.ViewportDataGrid.ViewportDataGridNode({id: 'aab'});
+  var ab = new DataGrid.ViewportDataGrid.ViewportDataGridNode({id: 'ab'});
+  var b = new DataGrid.ViewportDataGrid.ViewportDataGridNode({id: 'b'});
 
   var root = dataGrid.rootNode();
   var widget = dataGrid.asWidget();
@@ -118,7 +119,7 @@ import {DataGridTestRunner} from 'data_grid_test_runner';
   dumpNodes();
   attach(aa, aaa);
   attach(aa, aab);
-  var aac = new DataGrid.ViewportDataGridNode({id: 'aac'});
+  var aac = new DataGrid.ViewportDataGrid.ViewportDataGridNode({id: 'aac'});
   attach(aa, aac);
   dumpNodes();
   attach(aa, aac, 0);
@@ -150,7 +151,7 @@ import {DataGridTestRunner} from 'data_grid_test_runner';
   // crbug.com/542553 -- the below should not produce exceptions.
   dataGrid.setStickToBottom(true);
   for (var i = 0; i < 500; ++i) {
-    var xn = new DataGrid.ViewportDataGridNode({id: 'x' + i});
+    var xn = new DataGrid.ViewportDataGrid.ViewportDataGridNode({id: 'x' + i});
     root.appendChild(xn);
     if (i + 1 === 500) {
       dataGrid.updateInstantly();
@@ -163,7 +164,7 @@ import {DataGridTestRunner} from 'data_grid_test_runner';
 
   // The below should not crash either.
   for (var i = 0; i < 40; ++i) {
-    var xn = new DataGrid.ViewportDataGridNode({id: 'x' + i});
+    var xn = new DataGrid.ViewportDataGrid.ViewportDataGridNode({id: 'x' + i});
     root.appendChild(xn);
   }
   dataGrid.updateInstantly();

third_party/blink/web_tests/http/tests/devtools/console/console-big-array-expected.txt

@@ -1,6 +1,6 @@
 Tests that console logging dumps large arrays properly.
 
-console-big-array.js:18 Array(101)
+console-big-array.js:23 Array(101)
     [0 … 19]
         0: 0
         1: 1
@@ -48,7 +48,8 @@ console-big-array.js:18 Array(101)
         41: 41
         100: 100
     length: 101
-console-big-array.js:23 Array(10)
+    [[Prototype]]: Array(0)
+console-big-array.js:28 Array(10)
     0: undefined
     1: undefined
     2: undefined
@@ -61,7 +62,7 @@ console-big-array.js:23 Array(10)
     9: undefined
     length: 10
     [[Prototype]]: Array(0)
-console-big-array.js:29 Array(101)
+console-big-array.js:34 Array(101)
     0: 0
     1: 1
     2: 2
@@ -74,7 +75,8 @@ console-big-array.js:29 Array(101)
     9: 9
     100: 100
     length: 101
-console-big-array.js:34 Array(405)
+    [[Prototype]]: Array(0)
+console-big-array.js:39 Array(405)
     [0 … 399]
         [0 … 19]
         [20 … 39]
@@ -103,7 +105,8 @@ console-big-array.js:34 Array(405)
         403: 403
         404: 404
     length: 405
-console-big-array.js:47 Array(124)
+    [[Prototype]]: Array(0)
+console-big-array.js:52 Array(124)
     0: 0
     1: 1
     2: 2
@@ -123,7 +126,8 @@ console-big-array.js:47 Array(124)
     -123: -123
     NaN: NaN
     length: 124
-console-big-array.js:57 Array(4294967295)
+    [[Prototype]]: Array(0)
+console-big-array.js:62 Array(4294967295)
     [0 … 19]
         0: 0
         1: 1
@@ -179,7 +183,8 @@ console-big-array.js:57 Array(4294967295)
     4294967296: 4294967296
     8589934592: 8589934592
     length: 4294967295
-console-big-array.js:60 Uint8Array(64160003)
+    [[Prototype]]: Array(0)
+console-big-array.js:65 Uint8Array(64160003)
     [0 … 63999999]
         [0 … 3199999]
         [3200000 … 6399999]
@@ -204,4 +209,19 @@ console-big-array.js:60 Uint8Array(64160003)
     [64000000 … 64160002]
         [64000000 … 64159999]
         [64160000 … 64160002]
+    buffer: ArrayBuffer(64160003)
+        byteLength: 64160003
+        detached: false
+        maxByteLength: 64160003
+        resizable: false
+        [[Prototype]]: ArrayBuffer
+        [[Int8Array]]: Int8Array(64160003)
+        [[Uint8Array]]: Uint8Array(64160003)
+        [[ArrayBufferByteLength]]: 64160003
+        [[ArrayBufferData]]: 1
+    byteLength: 64160003
+    byteOffset: 0
+    length: 64160003
+    Symbol(Symbol.toStringTag): "Uint8Array"
+    [[Prototype]]: TypedArray
 

third_party/blink/web_tests/http/tests/devtools/console/console-big-array.js

@@ -6,6 +6,7 @@ import {TestRunner} from 'test_runner';
 import {ConsoleTestRunner} from 'console_test_runner';
 
 import * as Console from 'devtools/panels/console/console.js';
+import * as ObjectUI from 'devtools/ui/legacy/components/object_ui/object_ui.js';
 
 (async function() {
   TestRunner.addResult('Tests that console logging dumps large arrays properly.\n');
@@ -66,7 +67,7 @@ import * as Console from 'devtools/panels/console/console.js';
     })();
   `);
 
-  ObjectUI.ArrayGroupingTreeElement.bucketThreshold = 20;
+  ObjectUI.ObjectPropertiesSection.ArrayGroupingTreeElement.bucketThreshold = 20;
   var messages = Console.ConsoleView.ConsoleView.instance().visibleViewMessages;
   var sections = [];
 
@@ -87,7 +88,7 @@ import * as Console from 'devtools/panels/console/console.js';
     }
   }
 
-  TestRunner.addSniffer(ObjectUI.ArrayGroupingTreeElement.prototype, 'onpopulate', populateCalled, true);
+  TestRunner.addSniffer(ObjectUI.ObjectPropertiesSection.ArrayGroupingTreeElement.prototype, 'onpopulate', populateCalled, true);
   var populated = false;
 
   function populateCalled() {

third_party/blink/web_tests/http/tests/devtools/console/console-dir-global.js

@@ -5,6 +5,8 @@
 import {TestRunner} from 'test_runner';
 import {ConsoleTestRunner} from 'console_test_runner';
 
+import * as ObjectUI from 'devtools/ui/legacy/components/object_ui/object_ui.js';
+
 (async function() {
   TestRunner.addResult(`Tests that console dumps global object with properties.\n`);
 
@@ -34,7 +36,7 @@ import {ConsoleTestRunner} from 'console_test_runner';
 
   function getPropertiesCallback(allProperties) {
     const properties = allProperties.properties;
-    properties.sort(ObjectUI.ObjectPropertiesSection.CompareProperties);
+    properties.sort(ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.compareProperties);
 
     var golden = {
       'window': 1,